使用CSS3实现三级菜单

最新推荐文章于 2022-09-28 21:14:24 发布

yctang0811

最新推荐文章于 2022-09-28 21:14:24 发布

阅读量277

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_42409913/article/details/102876779

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一：效果
在这里插入图片描述
二：代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .nav{
      width: 960px;
      margin: 60px auto;
      border: 1px solid #222;
      background-color: #111;
      background-image: linear-gradient(#444, #111);
      border-radius: 6px;
      box-shadow: 0 1px 1px #777;
      padding: 0;
      list-style: none;
      /* overflow: hidden; */
    }
    .nav{
      zoom: 1;
    }
    .nav:before, .nav:after{
      content: '';
      display: table;
    }
    .nav:after{
      clear: both;
    }
    .nav li{
      float: left;
      border-right: 1px solid #222;
      box-shadow: 1px 0 0 #444;
      position: relative;
    }
    .nav li a{
      float: left;
      padding: 12px 30px;
      color: #999;
      font: bold 12px;
      text-decoration: none;
      text-shadow: 0 1px 0 #000;
    }
    .nav li:hover{
      color: #fafafa;
    }
    .nav li ul{
      visibility: hidden;
      position: absolute;
      list-style: none;
      top: 38px;
      left: 0;
      z-index: 1;
      padding: 0;
      background-color: #444;
      background-image: linear-gradient(#444, #111);
      box-shadow: 3px;
      opacity: 0;
      margin: 20px 0 0;
      _margin: 0;
      transition: all .2s ease-in-out;
    }
    .nav li:hover > ul{
      opacity: 1;
      visibility: visible;
      margin: 0;
    }
    .nav ul li{
      float: left;
      display: block;
      border: 0;
      box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }
    .nav ul a{
      padding: 10px;
      width: 130px;
      display: block;
      float: none;
      _height: 10px;
    }
    .nav ul a:hover{
      background-color: #0186ba;
      background-image: linear-gradient(#04acec, #0186ba);
    }
    .nav ul li:first-child > a{
      border-radius: 3px 3px 0 0;
    }
    .nav ul li:last-child > a{
      border-radius: 0 0 3px 3px;
    }
    .nav ul li:first-child > a:before{
      content: '';
      position: absolute;
      left: 40px;
      top: -6px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #444;
    }
    .nav ul li:first-child > a:hover:before{
      border-bottom-color: #04acec;
    }
    .nav ul ul{
      top: 0;
      left: 150px;
      margin: 0 0 0 20px;
      box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
      _margin: 0;
    }
    .nav ul ul li:first-child > a:before{
      left: -6px;
      top: 50%;
      margin-top: -6px;
      border-left: 0;
      border-right: 6px solid #3b3b3b;
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
    }
    .nav ul ul li:first-child > a:hover:before{
      border-bottom-color: transparent;
      border-right-color: #0299d3;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">大厅</a></li>
    <li><a href="#">客厅</a>
      <ul>
        <li><a href="#">卧室一</a>
          <ul>
            <li><a href="#">地下室一</a></li>
            <li><a href="#">地下室二</a></li>
            <li><a href="#">地下室三</a></li>
          </ul>
        </li>
        <li><a href="#">卧室二</a></li>
        <li><a href="#">卧室三</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

yctang0811

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3实现三级菜单

一：效果二：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫

专栏目录