Regarding Ul / Li hovering

HTML & CSS
1

http://rafflebananza.com/admin/test.html

I am trying to create multiple lists under the ‘Browse Raffles’ option of my drop down menu.

The image above is somewhat I’m looking to create.

Best Regards,
Tim

2

Quick assessment:

try removing the INLINE CSS of the child ULs, they are set to “display:none;”. Since inline CSS generally overrides any stylesheet, your rule won’t apply. Tho actually you can add display:block ! important; to your :hover rules, but that is messy.

ALSO, I noticed you have overflow:hidden; on your #topNavList, probably used to contain your floats, but this also has a the unfortunate side effects of hiding your drop downs as well.

3

This means the likes of <div style=“height:20px;”>? I don’t appear to have any?

4

INLINE CSS is anywhere you have used “style='” on the mark up.

for example, that DIV tag will be 20px regardless of what you used in your style sheet ( unless the style sheet rule has “! important” … but that usually also leaves you painted in to a corner)

5

I have none of these in my code

6

I believe the inline styles are being generated by the JavaScript:

if (ab > 979) {
			$('#TopNavList').css('display', 'block');
			$('#TopNavigation .DropDownWrap').removeClass("active");
		} else {
			$('#TopNavList').css('display', 'none');
			$('#TopNavigation .DropDownWrap').removeClass("active");
		}
7

How would you say to work around this as when you remove, if you change the width to see the other menu, open then close, then resize, the menu does not show which is a problem for mobile devices.

8

Hi,

What was the question again :slight_smile:

If you want multiple lists (mega -style) then you are looking for a mega-menu approach and you would need to have multiple uls in the drop down portion which are usually enclosed in a div parent or list parent. You show the div parent when required and then the uls can be floated next to each other to give the column effect.

This is a very very old demo (made for IE6) but shows how to have multiple columns.