Question

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

这是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>

Answer 1

menu ul li {
   position: relative;
}

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

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

   display: none;
}

这会将右子菜单放在列表项下。

html中子菜单的正确位置5

1 个答案: