CSS 下拉菜单未显示 child 个元素

Question

我正在努力设置 CSS 菜单，我已经按照一些教程进行操作，但在隐藏了一些二级菜单

项目后卡住了。我只想让这些项目显示在它们 parents 的正下方。（不像我见过的大多数教程那样放在一边）

我的代码在这里 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>

CSS 下拉菜单未显示 child 个元素

CSS Dropdown Menu not showing child elements

css

navigation

nav