                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

为什么点其他二级菜单，三级菜单也显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>

#nav{
  width: 600px;
       list-style: none;
  border: dashed 2px red;
  width: 600px;
  height: 80px;
  text-align: center;
  margin: 0 auto;

}

#nav li{
  float: left;
  width: 80px;
}
#nav li ul{
  list-style: none;
  padding: 0 80px;
}
#nav li a{
  line-height:80px;
  text-decoration: none;
  display: block;
  background-color: orange;
  text-align: center;

}

#nav li ul{
  display: none;
  position: relative;
  left:-80px;
}
#nav li:hover ul{
  display: block;
}

#nav li:hover ul li ul{
  display: none;

  }
#nav li ul li:hover ul {
  display:block;
  position: absolute;
  top: 0;
  left: 80px;
}
</style>
</head>
<div >
<ul id="nav">
  <li><a href="#">首页+</a>
  <ul>
   <li><a href="#">css+</a>
   <ul>
    <li><a href="#">bbb</a></li>
    <li><a href="#">aaa</a></li>
   </ul></li>
   <li><a href="#">bcc</a>
   <ul>
    <li><a href="#">aaa</a></li>
    <li><a href="#">bbb</a></li>
   </ul></li>
   </li>
  </ul>
  </li>
  <li><a href="#">课程大厅</a></li>
  <li><a href="#">学习中心</a></li>
  <li><a href="#">关于我们</a></li>
</ul>
</div>
<body>
</body>
</html>