Question

我正在尝试在主菜单项下添加子菜单，但未能这样做。我已经添加了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>

Answer 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; }

带有子选项的CSS水平菜单

1 个答案: