-1

我正在尝试在主菜单项下添加子菜单，但没有这样做。我已经添加display:none了隐藏子菜单，display:block以显示鼠标何时在主菜单上等到 CSS 中的一些标签，但它们都不起作用。也许我添加到错误的地方。

我已经清除了我所有的错误代码，而不是处理混乱的代码，而是给你一个清晰的代码来修改它。

除非鼠标悬停在其父菜单上，否则子菜单不应可见。子菜单也应出现在其父菜单的正下方。

提前致谢

CSS

<style>
.menu{
    width: 100%;
    background-color: #666666; }
.menu ul{
    margin: 0; padding: 0;
    float: left;}

.menu ul li{
    display: inline;
    position: relative;}

.menu ul li a{
    float: left; text-decoration: none;
    color: white; 
    padding: 10.5px 11px;
    background-color: #333; }

.menu ul li a:hover, .menu ul li .current{
    color: #fff;
    background-color:#0b75b2;}

</style>

HTML

<div class="menu">
    <ul>
        <li><a href="#">HOME</a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home short</a></li>
                <li><a href="#">Home very long</a></li>
            </ul>
        </li>
        <li><a href="#">ADMINISTRATOR</a>
            <ul>
                <li><a href="#">Admin</a></li>
                <li><a href="#">Admin short</a></li>
            </ul>
        </li>
        <li><a href="#">STAFF</a>
            <ul>
                <li><a href="#">staff</a></li>
            </ul>
        </li>
        <li><a href="#">LOGOUT</a></li>
    </ul>
    <br style="clear:left"/>
</div>
4

1 回答 1

1

改成.menu ul li ul{ position: absolute;}

如果我正确理解您的问题，现在可以正常工作。

所以..

.menu ul li ul{
position:absolute;
margin-top:40px;
width:150px;}

.menu ul li ul li{
display:block;}

隐藏直到悬停，.menu ul li ul{ display:none; } .menu ul li:hover ul{display:block; }

于 2013-02-27T12:11:55.803 回答