Dropdown Menu Not showing!

Ok having some issues.

I’ve used this code several times for Dropdowns and now the childs are not showing for some reason, I must have did something different but can’t find out what. Here is the site…

http://safety1consulting.com/2013/

If someone can see what I did wrong this time that would be great I’ve been pounding my head trying to see where went wrong this time.

Thanks,

Mike

Still banging my head on my desk with this, can’t see whats wrong with it from others I’ve done lol

Hi,
Try this code in css:

.ssf-blue-wrap ul li:hover ul {
  display: block;
  visibility: visible;
}
  • The ideea is to make the UL child visible when the LI parent is hover, like in the code above.

Nope, that didnt work I’ve never had to add that to any dropdowns in the past. Thanks though, hopefully can solve it shortly spending too much time trying to figure out why lol

Hi,

If a drop down menu doesn’t show then there are usually 2 main reasons.

  1. The menu is going behind something

  2. The parent div is set to overflow:hidden so nothing can show outside the menu.

In your case you have overflow:hidden on .row which holds the menu and therefore the dropdown menu will never show because it overflows the container. For the element called .row that holds the menu you will need to use another clearing mechanism instead of overflow:hidden. Use the clearfix method instead.

Thanks Paul,

I’m not too familiar with clearfix as never ran into this problem with using the dropdown this way so its weird that just hit this issue now cause I’ve always used this way in the past with the overflow: hidden on the row class. What exactly would I need to do.

Thanks,

Mike

HI,

Add another class here to the .row that holds the nav:


<div class="row [B]rownav[/B]">
		<div class="twocol">
			
		

Then use this css:


.rownav{
overflow:visible;
zoom:1.0;
}

.rownav:after{
content:" ";
display:block;
clear:both;
height:0;
visibility:hidden;
}

You can’t use overflow:hidden to clear floats when you have elements that need to poke out of the parent div - such as your dropdown menu. You can get away with it if you have more content in that same div under the menu so that the div is taller than the dropdown but in this case the row is only as tall as the nav top level do the overflow will be cut off

Or you could use AllWebMenus in order to avoid things like that. You just create your structure, you set the styles you want and you link it to your pages.

Why would someone trade a lightweight accessible menu for an inaccessible heavyweight menu that uses tables for layout and is fully reliant on javascript to work?