二级菜单–竖排
- 这是作为回顾之前学习的东西
- 大家也可以康康作为一种回顾
- 二级菜单 —竖 排
- 不足的地方请大家指出来
- 代码照常 都有详细解释
效果图
<!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样式 鼠标移上去的样式 -->- 这里是用来作为一个简单的回顾 就没有写的特别详细 有哪里不明白的话 都可以在 评论区讲出来
- 重置代码的话 在我另外一篇博客上 大家的要是不一样的话 可以去看一下。
- 谢谢啦
