下拉菜单与另一个项目重叠

EDIT

编辑

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

我的jsfiddle条目是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

所有的代码(只有那些必需的)都在那里，我在@Jasper的请求下更新了……有些部分可能会丢失，因为我不得不精简庞大的代码

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.

PS:当在jsfiddle中单击下拉菜单时，您在本地系统中无法看到红色下拉箭头作为图像，但是您可以单击箭头应该在的位置，以查看效果。

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

以上图片说明了我的问题……我的下拉菜单有什么问题?为什么和我的入口div类重叠....以下谁能给我点药吗?…我正在用这里的代码来开发这个……我也不知道额外的空间来自哪里

My markup HTML (with jquery for the dropdown):

我的标记HTML(下拉菜单用jquery):

<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:

我的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

下面的

…

创建了标题为Bedupako.Com上正在发生的事情的框

2 个解决方案

#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容器中声明一个位置，并添加一个z索引，比如9999，将其置于其他所有内容之上。

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

至于第二个问题，子菜单项继承了主菜单项的高度，即100像素，只需声明一个高度: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/

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

#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中的z索引。topnav不会与静态定位一起工作。要解决这个问题，只需应用相对定位:

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:

子导航中有额外的间隔是因为。subnav中的li元素继承了高度:100px来自ul的CSS样式。topnav李。为了解决这个问题，您应该从ul中删除高度:100px。topnav li将其添加到#菜单中:

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

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