©2020-2024 ioDraw All rights reserved
<>二级菜单–竖排
* 这是作为回顾之前学习的东西
* 大家也可以康康作为一种回顾
* 二级菜单 —竖 排
* 不足的地方请大家指出来
* 代码照常 都有详细解释
效果图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级菜单
竖</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet"
href="./css/secondaryMenu.css"> </head> <body > <div class="main"> <!--
设置一个主体框架 --> <!--这个HTML代码就是在ul里面放置li 和 ul 标签 这个大家简单看一下就明白啦--> <ul> <li> <a
href="#">一级菜单</a> <ul> <li><a href="#">二级菜单</a></li> </ul> </li> <li> <a
href="#">一级菜单</a> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li>
<li> <a href="#">一级菜单</a> <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul>
</li> </ul> </div> </body> </html>
下面是css代码
body{ font-size: 14px; color: black; background-color: #ccc; font-family:
Arial, Helvetica, sans-serif,"微软雅黑"; line-height: 1.5; } <!-- 这里是给整个网页设置一些属性
字体大小 背景颜色 字体颜色 还有字体 行高等 都设为全局的啦 --> a{ color: #00a1d6; text-align: center; }
<!-- 这里就是给全局的 a 标签设置一些样式 --> .main{ width: 220px; border: 1px solid #eee; margin
: 10px auto; box-sizing: border-box; } <!-- 上面是给那个主要的div设置样式 定宽 设置边框等 让它居中等 -->
.main ul li{ border: 1px solid #eee; line-height: 50px; height: 50px; <!--
这里就是居中的意思 行高和高度相等 -->background-color:#fff; position: relative; text-align:
center; <!-- 文本居中 --> box-sizing: border-box; } .main ul li ul{ display: none;
<!-- 这里是隐藏的意思 -->position: absolute; left: 218px; top: -3px; width: 120px;
height: 50px; border: 1px solid #ccc; box-sizing: border-box; } .main li:hover{
background-color: #008c8c; } .main ul li:hover ul{ display: block; border-right:
none; } <!-- 这是hover样式 鼠标移上去的样式 -->
* 这里是用来作为一个简单的回顾 就没有写的特别详细 有哪里不明白的话 都可以在 评论区讲出来
* 重置代码的话 在我另外一篇博客上 大家的要是不一样的话 可以去看一下。
* 谢谢啦