Overlapping a dropdown with another item

Question

EDIT

My jsfiddle entry is here: http://jsfiddle.net/ehNrE/3/

All the codes (only those that are required) below, I updated at the request of @Jasper ... some parts may be missing, because I had to cut huge code

PS . When you click on the drop-down menu in jsfiddle you cannot see the red down arrow as your image on the local system, but you can just click on it where the arrow should be indicated to see the effect.

ORIGINAL MAIL

The above images explain my problem ... what is the problem with my dropdown menu? Why does this override my entry div class below. Can anyone suggest a remedy for this? ... I use the codes from here to develop this ... also I dono where the extra space comes from

My HTML markup (with jquery for the dropdown):

 <div id="menu"> <ul class="topnav"> <li><a href="#">Live-Radio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Home</a></li> <li> <a href="#">Songs</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> </ul> <script type="text/javascript"> $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*) $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script> </div> 

My CSS:

 #menu{ float:left; height:71px; padding-top:35px; text-align: right; width: 400px; } ul.topnav { list-style: none; margin: 0; font-size: 1.2em; z-index:50; } ul.topnav li { height:100px; float: right; margin: 0; padding: 0 15px 15px 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } ul.topnav li a{ padding: 10px 5px; color: #222; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ font-weight:bold; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(images/down.png) no-repeat center top; } ul.topnav li span.subhover {cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; } .entry{ position:relative; margin:0 0 20px 0; border:2px solid #fff; background:#eee url(images/entrybg.png) repeat-x; color:#333; padding:10px 10px 0 10px; } 

And below <div class="entry"> ... </div> creates the field that you see with the title What happening at Bedupako.Com

Answer 1

Firstly, your menu overlaps the content area because it does not understand who goes first in the stream, since your submenu is absolutely positioned. To fix this, simply declare the position in your #menu container and add a z-index something like 9999 to position it above everything else.

 #menu { position:relative; z-index:9999; } 

As for your second problem, submenu items inherit the height of your main menu items, which is 100 pixels, just declare height:auto in the li submenu to fix this.

 ul.topnav li ul.subnav li { height: auto; } 

EDIT ::

Fiddle

http://jsfiddle.net/andresilich/ehNrE/6/

Answer 2

The reason your menu appears behind your content is because the z-index in ul.topnav will not work with static positioning. To fix this, you can simply apply relative positioning:

 ul.topnav { position: relative; /* add this */ list-style: none; margin: 0; font-size: 1.2em; z-index:50; } 

The reason for the extra spacing in sub-nav is because li elements in .subnav inherit height: 100px from CSS styles in ul.topnav li . To get around this, you should remove height: 100px from ul.topnav li and add it to #menu :

 #menu{ height:100px; /* add this */ float:left; height:71px; padding-top:35px; text-align: right; width: 400px; } ul.topnav li { /* height:100px; remove this */ float: right; margin: 0; padding: 0 15px 15px 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } 

JSfiddle: http://jsfiddle.net/ehNrE/5/