html简单下拉⼆级菜单
在实际⽹页中经常能看到⼆级菜单的使⽤，如下图所⽰，
⿏标移动到相应位置菜单栏才会有响应
具体实现代码如下（仅供参考）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉⼆级菜单</title>
<!--这是⼀段注释-->
<style type="text/css">
/*初始化边界*/
*{
margin: 0;
padding: 0;
}
body{
padding-top: 50px;
font-size: 15px;
}
li{
/*list-style设定为none可以去除列表前的⼩圆点*/
list-style: none;
color: white;
}
div{
text-align: center;
color: white;
}
.father{
display: inline-block;
/*relative⽣成相对定位的元素，相对于其正常位置进⾏定位。*/
position: relative;
/*上下边距为10px，左右边距为50px*/
padding: 10px 50px;
background-color: #6495ed;
html下拉菜单的制作方法/*将⽅框的⾓变为圆⾓框*/
border-radius: 5px;
}
.son{
position: absolute;
display: none;
background-color: #5469c6;
top: 25px;
left: 10px;
right: 10px;
padding-left: 0px;
}
.son>li{
padding: 5px;
}
/*hover是指当⿏标移动到上⾯是才有响应*/
.
father:hover{
background-color: #4d7afa;
background-color: #4d7afa;
}
.son li:hover
{
background-color: cornflowerblue;
}
.father:hover .son{
display: block;
}
.
link1{
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a class="link1"href="www.baidu"><li class="father">⼀级菜单</a>
<ul class="son">
<li>⼆级菜单</li>
<li>⼆级菜单</li>
<li>⼆级菜单</li>
</ul>
</li>
<li class="father">⼀级菜单
<ul class="son">
<li>⼆级菜单</li>
<li>⼆级菜单</li>
<li>⼆级菜单</li>
</ul>
</li>
<li class="father">⼀级菜单
<ul class="son">
<li>⼆级菜单</li>
<li>⼆级菜单</li>
<li>⼆级菜单</li>
</ul>
</li>
</div>
</body>
</html>
padding是内边距，border是边界（默认为0），margin为外边界

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