Question

我想知道是否有人能看到我的代码中的错误，我显然没有看到。我正在尝试创建一个简单的导航栏，其子菜单位于“品牌”下。出现在悬停上。不确定我是否将菜单定位错误，或者发生了什么。任何帮助，将不胜感激。谢谢

<div class="nav">
        <ul>
            <li> <a href="#"> Home </a> </li>
            <li> <a href="#"> History </a> </li>
            <li> <a href="#"> Brands </a> </li>
                <ul> 
                    <li> <a href="#"> Proprietary Brands </a> </li>
                    <li> <a href="#"> Licenced Brands </a> </li>
                    <li> <a href="#"> Distributed Brands </a> </li>
                </ul>
            <li> <a href="#"> Corp. Info </a> </li>
            <li> <a href="#"> Investors </a> </li>
        </ul>
    </div>



.nav{
    width: 100%;
}

.nav ul{
    font-size: 1.2em;
    text-align: right;
    padding-right: 5%;
    padding-top: 2%;
    list-style: none;
}

.nav li {
    text-decoration: none;
    padding-left: 2%;
    display: inline-block;
}

.nav li li{
    font-size: 1em;
}

.nav li ul{
    position: absolute;
    display: none;
    width: inherit;
}

.nav li:hover ul{
    display: block;
}

.nav li ul li{
    display: block;
}

Answer 1

你的HTML有点不对，应该是

...
    <li>
        <ul> ... </ul>
    </li>
...

而不是

...
    <li> ... </li>
    <ul> ... </ul>
    <li> ... </li>
...

这意味着您关闭 li 标记，该标记应该是太快的容器，这会使您的 .nav li ul 的csss和任何带有它的css变得无效，因为没有结构像那样存在于你的HTML

中

使用CSS无效时悬停下拉菜单

1 个答案: