任务10-CSS二级下拉菜单

HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="nav">
  <ul >
    <li><a href="">首页</a></li>
    <li><a href="">作品</a></li>
    <li><a href="">更多</a>
      <ul >
        <li><a href="">HitHub</a></li>
        <li><a href="">博客</a></li>
        <li><a href="">知乎</a></li>
      </ul>
    </li>
 </ul>
</div>
</body>
</html>

css代码

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.nav{
  width:600px;
  height:35px;
  margin:10px auto;
  background-color:#eee;
  border-radius:3px;
  box-shadow:0px 2px 5px 1px #888888;
}

ul{
  list-style:none;
}

ul li{
  float:left;
  width:70px;
  height:35px;
  position:relative;
}

a{
  text-decoration:none;
  text-align:center;
  line-height:35px;
  color:#000;
  font-size:16px;
  display:block;
  width:70px;
  height:35px;
}

a:hover{
  background-color:#aaa;
  color:#eee;
}
ul li ul{
  position:absolute;
  left:0;
  top:35px;
  box-shadow:0px 2px 5px 1px #888888;
  width:150px;
  display:none;
}


ul li ul li{
  float:none;
  background-color:#fff;
  width:100%;
  
  
}
ul li ul li a{
  width:100%;
  text-align:left;
  padding-left:16px;
  /*  如果不改变宽度，这个样式可不用*/
}

ul li ul li a:hover{
  /* 如果二级菜单不改变触发样式，这个样式可不用 */
  background-color:#f05;
}
ul li:hover ul{
  display:block;
}

最后编辑于：2019.02.28 19:40:14

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

任务10-CSS二级下拉菜单

推荐阅读更多精彩内容