CSS下拉菜单不显示子元素

Question

我正在设置我的 CSS 菜单，我遵循了一些教程，但在隐藏了一些二级菜单后陷入了困境

项。我只是希望这些项目显示在他们父母的正下方。 （不像我见过的大多数教程那样偏向一边）

我的代码在这里 http://codepen.io/anon/pen/pJMdqv

HTML

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Lessons</a></li>
        <ul>
            <li><a href="#">Lesson 1</a></li>
            <li><a href="#">Lesson 2</a></li>
        </ul>
        <li><a href="#">Dictionary</a></li>
        <ul>
            <li><a href="#">Phrases</a></li>
            <li><a href="#">Onomatopoeia</a></li>
        </ul>
        <li><a href="#">Sentences</a></li>
        <ul>
            <li><a href="#">Beginner</a></li>
            <li><a href="#">Intermediate</a></li>
            <li><a href="#">Advanced</a></li>
        </ul>
    </ul>
</nav>

CSS

nav {
width: 180px;
margin-top: 15px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
position: relative;
}

nav a {
color: 101010;
padding: 12px 0px;
display: block;
text-decoration: none;

 transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}

nav a:hover {
background: #ececec;
}

nav ul ul {
display: none;
}

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

Answer 1

您的嵌套已关闭。而不是：

<li><a href="#">Lessons</a></li>
<ul>
  <li><a href="#">Lesson 1</a></li>
  <li><a href="#">Lesson 2</a></li>
</ul>

您需要将子菜单 ul 包含在悬停在父级 li 中：

<li>
  <a href="#">Lessons</a>
  <ul>
    <li><a href="#">Lesson 1</a></li>
    <li><a href="#">Lesson 2</a></li>
  </ul>
</li>