CSS下拉菜单不显示子元素

I am working on getting my CSS Menu setup, I have followed some tutorials but got myself stuck after hiding some secondary menu

我正在努力获得我的CSS菜单设置,我已经遵循了一些教程,但在隐藏了一些二级菜单后让自己陷入困境

items. I just want the items to show up right below their parents. (Not to the side like most tutorials I've seen)

My code is here http://codepen.io/anon/pen/pJMdqv

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

1 个解决方案

#1

Your nesting is off. Instead of:

你的筑巢是关闭的。代替:

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

You need to include your submenu ul within the parent li that gets hovered over:

您需要在父Li中包含您的子菜单:

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

#1