通过HTML和CSS实现一个三级菜单

豆葛

已于 2022-09-28 21:28:58 修改

阅读量1.8k

点赞数 5

文章标签： html 前端 css

于 2022-09-28 21:14:24 首次发布

本文链接：https://blog.csdn.net/weixin_53428952/article/details/127097240

版权

本篇文章发布的代码是关于使用html和css实现一个三级菜单列表,在学习的过程中,做一下自己想做的东西,争取以后可以自己做出一个自己的网站来.

实现二级菜单我有两个思路

一个是将二级菜单display:none,当hover一级菜单的时候,将二级菜单的display:block;

另外一个是将二级菜单的ul高度设为0 overflow:hidden; 当hover一级菜单的时候,二级菜单 height:auto;

三级菜单的思路则和设计二级菜单的思路一样

顺着下来就好了

如果要调整一下显示的位置的话,可以使用position调整位置,让菜单看起来更加的美观.

在细节方面,我为ul li a标签都设置了一样的高度和宽度,防止出现有的自动扩展他的长度导致页面的布局混乱. 此外还设置了边框的radius, 差不都就这些.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
*{margin:0;padding:0;}
body{ 
  transition:all 0.5s linear;
}
/* #去掉默认的样式 */
ul{
  list-style:none;
  transition:all 6s linear;
}
/* 设定点击a链接的前后状态变化 */
a{
  display: block;
  width: 200px;
  height: 50px;
  /* background-color: white; */
  color: black;
  text-align: center;
  text-decoration: none;
}
a:hover{ 
  font-weight: 900;
  font-size:larger;
  color:rgb(52, 42, 42);
  background-color: rgb(78, 91, 102);
  border-radius: 10px;
  
}
/* li的通用设计 */
li{ 
  width: 200px;
  line-height:50px; 
  height:50px;
  background-color: rgb(116, 183, 183);
  border-radius: 10px;
}

/* #设置第一行的li左浮动,让他可以横向排列 */
.l1{
  float:left;
  border: 1px black solid;
  border-radius: 10px;
  /* background-color: rgb(0, 0, 0); */
  /* overflow: hidden; */
}

.l3{ 
  background-color: rgb(145, 181, 181);
  position: relative;
  left:30px;
}
.l0{ 
  background-color: rgb(165, 186, 186);
}
/* #使用了高度归零的隐藏方式 */
.u4{ 
  position:absolute;
  left: 200px;
  top:10px;
  height:0;
  overflow:hidden;
}
.l3:hover .u4{ 
  height:auto;
}

/* #使用经典的none方式*/
.u2{ 
  display: none;
  opacity: 0;
}
.l1:hover .u2{
  display:block;
  opacity:1;
}

  </style>
</head>
<body>
  <ul>

    <!-- 一级标题 -->
    <li class="l1"><a>一级标题</a>
      <ul class="u2">
        <!-- 二级标题   -->
        <li class="l3" ><a>二级标题</a>

          <ul class="u4">
            <!-- #三级标题 -->
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>        
          </ul>
        </li>
        <!-- 二级标题的完结 -->
        <!-- 二级标题   -->
        <li class="l3" ><a>二级标题</a>

          <ul class="u4">
            <!-- #三级标题 -->
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>        
          </ul>
        </li>
        <!-- 二级标题的完结 -->
        <!-- 二级标题   -->
        <li class="l3" ><a>二级标题</a>

          <ul class="u4">
            <!-- #三级标题 -->
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>        
          </ul>
        </li>
        <!-- 二级标题的完结 -->
       
      </ul>
    </li>
<!-- 一个框框的完结 -->
    <!-- 一级标题 -->
    <li class="l1"><a>一级标题</a>
      <ul class="u2">
        <!-- 二级标题   -->
        <li class="l3" ><a>二级标题</a>

          <ul class="u4">
            <!-- #三级标题 -->
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>        
          </ul>
        </li>
        <!-- 二级标题的完结 -->
       
      </ul>
    </li>
<!-- 一个框框的完结 -->
    <!-- 一级标题 -->
    <li class="l1"><a>一级标题</a>
      <ul class="u2">
        <!-- 二级标题   -->
        <li class="l3" ><a>二级标题</a>

          <ul class="u4">
            <!-- #三级标题 -->
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>
            <li class="l0"><a>三级标题</a></li>        
          </ul>
        </li>
        <!-- 二级标题的完结 -->
       
      </ul>
    </li>
<!-- 一个框框的完结 -->
  
  </ul>



</body>
</html>

豆葛

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
通过HTML和CSS实现一个三级菜单

实现二级菜单我有两个思路,一个是将二级菜单display:none,当hover一级菜单的时候,将二级菜单的display:block;当hover一级菜单的时候,二级菜单 height:auto;三级菜单的思路则和设计二级菜单的思路一样,顺着下来就好了,如果要调整一下显示的位置的话,可以使用position调整位置,让菜单看起来更加的美观.本篇文章发布的代码是关于使用html和css实现一个三级菜单列表,在学习的过程中,做一下自己想做的东西,争取以后可以自己做出一个自己的网站来.
复制链接

扫一扫