css - 主导航下子导航的悬停问题

Question

我正在尝试创建这样的导航。基本上，当鼠标悬停在“navigation1”上时，嵌套的“ul” block 应该显示为子菜单。

嵌套的“ul”在鼠标悬停时按预期显示，但问题是嵌套的 ul block (用于子菜单)显示在“Navigation1”之上，因此它不会使整个“Navigation1” ' 链接可点击。只有一半的文本是可点击的。我不知道为什么它会出现在上面。

        <li id="sub_nav" style="vertical-align:top; margin-left: 110px; width:70px;"><a href="nav1.php">Navigation1</a>     
            <ul style="filter:alpha(opacity=100); opacity:1;  top:14px; padding: 0; margin-top:0px; margin-left: -67px; ">
                <li style="text-align: center; padding:0px; margin:0px; height:10px; background-color:#ffffff"><img src="imgs/nav_up_arrow.gif"/></li>
                <li style="height:15px;"><img src="imgs/i.gif" width="1" height="1"></li>
                <li style="margin-right:0px"><a href="sub1.php?id=1">Sub1</a></li>
                <li><a href="sub2.php?id=2">Sub2</a></li>
                <li><a href="sub3.php?id=3">Sub3</a></li>
            </ul>
        </li>

    <script type="text/javascript">
   $(document).ready(function () { 

     $('ul#nav li#sub_nav').hover(
     function () {
        //show its submenu
        $('ul', this).stop(true, true).slideDown(100);

     }, 
     function () {
        //hide its submenu
        $('ul', this).stop(true, true).slideUp(100);            
     }
   );
});
</script>

    #nav {
    margin:0; 
    padding:0; 
    list-style:none;
}   

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        float:left; 
        display:block; 
        width:90px; 
        background:#fff; 
        position:relative;
        top: 87px;
        margin:0 1px;
    }

    /* this is the parent menu */
    #nav li a {
        display:block; 
        padding:8px 0px 0 0px; 
        font-weight:400;  
        height:23px;
        color: #6e6d6d;
        font-size: 18px;
        text-decoration:none; 
        text-align:center; 
    }


    /* submenu, it's hidden by default */
    #sub_nav ul {
        position:absolute; 
        left:0; 
        display:none;  
        margin:0 0 0 0; 
        padding:0; 
        list-style:none;
    }

    #sub_nav ul li {
        width:200px; 
        float:left; 
        top: 20px;
        border-top:0px #fff;
        margin-bottom: -9px;
        background-color:#000000;
    }

    /* display block will make the link fill the whole area of LI */
    #sub_nav ul a {
        color:#ccc;
        text-align: left;
        margin-left: 25px;
        font-size: 12px;
        font-weight: normal;
    }

    #sub_nav ul a:hover {
        text-decoration:none;
        color: #ffffff;
        font-size:12px;
        font-weight: normal;
    }

我为 navigation1 尝试了“z-index:999”，为嵌套的“ul”尝试了 z-index:500，但它似乎不起作用。

如果有人有任何想法，我将不胜感激。

Answer 1

也许你只需要这样设计: 1. li#subnav with position:relaitve; 2.具有绝对位置的嵌套ul；和 top 的高度与 li#subnav 相同。 这样 navigation1 链接就可以完全点击了。