Overlapping of dropdown menu with another item

Question

EDIT

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

All the codes(only those required) below are there, I updated upon the request of @Jasper... tho some parts may be missing as i had to trim down the huge code

PS: While clicking for the drop down menu in jsfiddle, you cannot see the red down arrow as its an image in the local system, but you can just click on where the arrow is supposed to be to see the effect.

ORIGINAL POST

The above images explains my problem... whats the problem with my drop down menu? Why is it overlapping with my entry div class below.... Can anyone suggest a remedy for it? ... I am using the codes from here to develop this... also I dono where the extra space is coming from

My markup HTML (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 the below <div class="entry"> ... </div> creates the box you see with the title What's happening at Bedupako.Com

Answer 1

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

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

As for your second issue, the submenu items are inheriting the height of your main menu items, which is 100 pixels, simply declare a height:auto to your submenu li items to fix this.

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

EDIT::

Fiddle

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

Answer 2

The reason that your menu is appearing behind your content is because 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 there is extra spacing in the sub-nav is because li elements in .subnav are inheriting height: 100px from the CSS styling in ul.topnav li. To get around this you should remove height: 100px from ul.topnav li and add it to #menu instead:

#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/