CSS下拉菜单不显示子元素

我正在进行CSS菜单设置，我已经学习了一些教程，但在隐藏了一些辅助菜单项后，我陷入了困境。我只想让这些物品显示在他们父母的正下方。（不像我看过的大多数教程那样偏侧）

我的密码在这里

HTML

---

你的巢穴掉了。而不是：

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

---

没问题。请记住，

元素只能有

元素作为其直接后代。

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;
}

<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="#">Lessons</a>
  <ul>
    <li><a href="#">Lesson 1</a></li>
    <li><a href="#">Lesson 2</a></li>
  </ul>
</li>