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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。