CSS dropdown nav calling html content to move

Question

My first question is about SO, I hope it goes down to scratch, should be a simple solution for someone well-versed in css art ...

Im's problem is that the dropdown sections of my CSS based navigation cause the content below it to shift to the right. I found similar questions, but I tried all the solutions provided, and nothing seems to work.

The closest I managed to get was to add position:absolute; to the #nav li:hover ul tag, and this does not allow moving the content, but it creates a new problem, the drop-down submenu is displayed only when the mouse has completed the top-level menu item and an attempt is made to move the mouse down the submenu so that it disappears ... another problem, which I find equally frustrating for a decision ...

html for navigation are standard nested lists:

 <div id="navigation_panel" class="orange_grad"> <!-- navigation--> <ul id="nav"> <li><a href="#">about us</a> <ul> <li class="orange_grad"><a href="1">staff</a></li> <li class="orange_grad"><a href="2">venue</a></li> <li class="orange_grad"><a href="2">history</a></li> <li class="orange_grad"><a href="2">community theatre</a></li> <li class="orange_grad"><a href="2">rep theatre</a></li> <li class="orange_grad"><a href="2">theatre school</a></li> <li class="orange_grad"><a href="2">official partners</a></li> </ul> </li> <li><a href="#">join us</a> <ul> <li class="orange_grad"><a href="1">friends membership</a></li> <li class="orange_grad"><a href="2">wine club</a></li> </ul> </li> <li><a href="#">hire</a> <ul> <li class="orange_grad"><a href="1">business</a></li> <li class="orange_grad"><a href="2">rehersal space</a></li> <li class="orange_grad"><a href="2">community groups</a></li> <li class="orange_grad"><a href="2">theatre productions</a></li> <li class="orange_grad"><a href="2">memorable occasions</a></li> </ul> </li> <li><a href="#">contact</a> <ul> <li class="orange_grad"><a href="1">list of contacts</a></li> <li class="orange_grad"><a href="2">contact us now</a></li> </ul> </li> <li class=" last"><a href="#">support</a> <ul> <li class="orange_grad last"><a href="1">donations + requests</a></li> <li class="orange_grad last"><a href="2">past sponsors</a></li> <li class="orange_grad last"><a href="2">thanks</a></li> <li class="orange_grad last"><a href="2">volunteers</a></li> <li class="orange_grad last"><a href="2">set up a community event</a></li> </ul> </li> </ul> 

and the accompanying css is as follows:

 #navigation_panel {border-radius: 18px 18px 0 0/ 18px 18px 0 0; width: 900px; height:50px;} #nav { margin:0; padding: 0; list-style:none;} #nav a{ color:black; font-size: 20px; text-decoration:none; min-height:50px; width:95px;} #nav li {text-align:center; float:left; padding:14px 8px ; cursor:pointer; width:95px;} #nav li.last{width:99px;} #nav li ul {margin-top:14px; margin-left:-8px; padding:0; display: none; list-style:none;} #nav li ul li{ border:1px solid black; width:95px; padding:6px 8px;} #nav li ul li a{/*font-family:arial;*/ font-size:14px;} #nav li:hover{ text-decoration:underline; } #nav li:hover ul{display: block;} #nav li:hover ul li {clear: left;} 

I tried to find solutions on regular routes (search on google, SO, etc.), and also play with various positioning configurations, but I just can not solve this problem ... Thanks for any help in advance, this problem drove me to crazy all day!

Answer 1

Update

Finally, there was a chance to take a fresh look at this. All you need to do is add the #nav li ul to #nav li ul :

 position: absolute; z-index: 100; 

Works in IE8 / 9, FF, and Chrome, although submenu positioning is disabled in IE7 with or without modification. To fix this, I recommend CSS for IE7 using whatever method you prefer.

Answer 2

You can try to do something with z-index . Z-index is the “creation" of layers, so maybe you can set your sub-navigation to z-index: 2.

But in situations like creating a drop down menu, I recommend using jQuery. I once tried to create a drop-down menu with pure CSS and HTML, but soon found out that jQuery is the way to go, better.

Example dropdown using jQuery: jsfiddle

JQuery

 $(".subnav").hide(); $(".navigation li a, .subnav").hover(function(){ $(this).parent().find(".subnav").stop().fadeIn(400); }, function(){ $(this).parent().find(".subnav").stop().fadeOut(400); });​ 

HTML:

 <div> <ul class="navigation"> <li><a>Example 01</a></li> <li><a>Example 02</a> <ul class="subnav"> <li><a>Lorem</a></li> <li><a>Impsum</a></li> <li><a>Dolor</a></li> <li><a>Sit</a></li> <li><a>Amet</a></li> </ul> </li> <li><a>Example 03</a></li> <li><a>Example 04</a></li> </ul> </div>​ 

CSS

 .navigation li{ display: inline; font-family: Arial, sans-serif; font-size: 12px; padding: 0 10px; position: relative; } .navigation li a:hover{ color: #999; } .subnav li{ display: list-item; padding: 5px 10px; } .subnav{ border: 1px solid #000; width: 70px; position: absolute; z-index: 2; margin-left: 10px; }​