<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
margin: 0%;
padding: 0%;
}
body {
background:#FFF;
margin:50px;
font-family:"Helvetica Neue", sans-serif;
}
#menu{
background: #27AE60;
height: 65px;
}
#menu ul li{
display: block;
float: left;
border-right: 1px solid rgba(155,255,255,.3);
list-style: none;
position:relative; /* 不要忘记定位*/
}
/* 二级菜单会将一级菜单撑开*/
#menu ul li a{
display:block;
padding:0 35px;
line-height:65px;
font-size:21px;
color:#FFF;
text-decoration:none;
}
/* 将二级菜单隐藏,二级菜单回复正常大小*/
#menu ul li ul{
display:none;
position: absolute;
top: 65px;
background:#2ECC71;
}
/* 当鼠标在一级菜单悬停的时候显示二级菜单,但是这时候二级菜单继承
一级菜单的样式,右侧会显示横线*/
#menu ul li:hover ul{
display:block;
}
/* 重新设置二级菜单的样式*/
#menu ul li ul li{
width: 100%;
border-radius: 0;
border-top: 1px solid rgba(255,255,255,.3);
}
/* 设计二级菜单的字体小于一级菜单*/
#menu ul li ul a{
font-size: 18px;
line-height: 50px;
}
/* 所有菜单项鼠标悬停时,颜色加深*/
#menu ul li:hover{
background:rgba(0,0,0,.2);
}
</style>
</head>
<body>
<nav id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a>
<ul>
<li><a href="">Sports</a></li>
<li><a href="">Weather</a></li>
<li><a href="">Finance</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Construction</a></li>
<li><a href="">Machinery</a></li>
<li><a href="">Compressor</a></li>
<li><a href="">Vehicle</a></li>
</ul>
</li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</body>
</html>
</body>
</html>
下拉菜单
最新推荐文章于 2020-07-09 04:35:17 发布