0

我不能让我的子菜单直接悬停在正确的菜单下方，而是所有子菜单都悬停在同一位置。如何让我的子菜单正确悬停的任何帮助都会有很大帮助。

这是CSS代码：

menu {
    display:block;
    width:100%;
    height:25px;
    padding:0;
    float:right;
    margin-top:-45px;
    border-bottom:1px solid #999;
    border-top:1px solid #999;
}

menu ul {
    margin:0;
    display:block;
    padding:0;
    text-align:center;
    position:relative;
}
menu ul li{
    list-style-type:none;
    padding:15px;
    display:inline;
}

menu ul li a, menu ul li ul li a {
    text-decoration:none;
    color:#003;
    font-family:"Comic Sans MS", cursive;
    font-size:15px;
    display:inline-block;
    text-align:center;
    margin-top:4px;

}

menu ul li ul{
    display:none;
    position:absolute;
}

menu ul li:hover ul{
    display:block;
    background-color:#CCC;
    height:auto;
    width:120px;
    padding:0;
}

menu ul li ul li{
    clear:both;
}

这是html代码：

<menu>
    <ul>
        <li><a href="#">MENU 1</a>
            <ul>
                <li><a href="#">SUBMENU 1</a></li>
                <li><a href="#">SUBMENU 2</a></li>
            </ul>
        </li>
        <li><a href="#">MENU 2</a>
            <ul>
                <li><a href="#">SUBMENU 1</a></li>
                <li><a href="#">SUBMENU 2</a></li>
            </ul>
        </li>    
        <li><a href="#">MENU 3</a>
            <ul>
                <li><a href="#">SUBMENU 1</a></li>
                <li><a href="#">SUBMENU 2</a></li>
            </ul>
        </li>
        <li><a href="#">MENU 4</a>
            <ul>
                <li><a href="#">SUBMENU 1</a></li>
                <li><a href="#">SUBMENU 2</a></li>
            </ul>
        </li>
    </ul>
</menu>
4

1 回答 1

0 
menu ul li {
   position: relative;
}

menu ul li:hover > ul {
   display: block;
}

menu ul li > ul {
   position: absolute;
   bottom: 0;
   left: 0;

   display: none;
}

这会将右侧的子菜单定位在列表项下。

于 2013-04-17T16:44:41.143 回答