html - 使用 CSS 悬停时下拉菜单不起作用

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 的 css 以及带有它的任何内容都变得无效，因为没有结构就像你的 html 中存在的那样