纯CSS下拉菜单

最新推荐文章于 2023-12-28 18:29:15 发布

排骨可乐

最新推荐文章于 2023-12-28 18:29:15 发布

阅读量590

点赞数 1

分类专栏：代码学习文章标签：下拉菜单

本文链接：https://blog.csdn.net/shuai9201/article/details/72991092

版权

代码学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

页面代码如下：

  <div id="menu">
    <ul id="nav">
      <li><a href="#">一级下拉一</a>
      <ul>
        <li><a href="">二级下拉1-1</a></li>
        <li><a href="">二级下拉1-2</a></li>
        <li><a href="">二级下拉1-3</a></li>
        <li><a href="">二级下拉1-4</a></li>
      </ul>
      </li>
      <li><a href="">一级下拉二</a>
      <ul>
        <li><a href="">二级下拉2-1</a></li>
        <li><a href="">二级下拉2-2</a></li>
        <li><a href="">二级下拉2-3</a></li>
        <li><a href="">二级下拉2-4</a></li>
      </ul>
      </li>
    </ul>
  </div>

CSS代码如下：

*{margin:0;padding:0;border:0;}
body{font-family: :arial;font-size: 12px;}
#nav{line-height: 24px;list-style: none;background: #666;margin:50px 0 0 100px;}
#nav a{display: block;width: 90px;text-align: center;color:#666;text-decoration: none;}/*一级目录链接display*/
#nav a:hover{color:#fff;text-decoration: none;font-weight: bold;}
#nav li{float: left;width: 90px;background: #ccc;}
#nav li a:hover{background: #999;}
#nav li ul{line-height: 27px;list-style:none;text-align: left;left: -999em;width: 180px;position: absolute;}/*二级目录绝对定位*/
#nav li ul li{float: left;width: 180px;background: #efefef;}
#nav li ul a{display: block;width: 156px;text-align: left;padding-left: 24px;overflow: hidden;}/*清除多余边角*/
#nav li ul a:hover{color: #f3f3f3;text-decoration: none;font-weight: normal;background: #c00;}
#nav li:hover ul{left: auto;}/*标签伪类，鼠标放放上去，变颜色*/