一、CSS
@charset "UTF-8";
*{
padding: 0px;
margin: 0px;
}
.ul1{
margin: 40px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.ul1>li{
width: 160px;
height: 40px;
background: rgba(30,80,200,0.6);
font-size: 20px ;
border-radius: 0.5em 0.5em 0 0;
text-align: center;
line-height: 2em;
margin-left: 1px;
float: left;
}
.ul1>li:hover ul{
display: block;
}
.ul2{
background: rgba(80,80,160,0.3);
display: none;
border-radius:0 0 0.5em 0.5em ;
}
.ul2>li>a:hover{
background: rgba(40,180,40,0.8);
width: 80%;
height: 1.5em;
line-height:1.5em ;
display: inline-block;
border-radius: 0.5em;
padding: 3px 3px;
font-weight: bold;
}
二、HTML
<body>
<ul class="ul1">
<li><a href="">首页</a>
<ul class="ul2">
<li><a href="">新闻</a></li>
<li><a href="">论坛</a></li>
<li><a href="">图片</a></li>
<li><a href="">影视</a></li>
</ul></li>
<li><a href="">国际</a>
<ul class="ul2">
<li><a href="">军事</a></li>
<li><a href="">政治</a></li>
<li><a href="">游戏</a></li>
<li><a href="">汽车</a></li>
</ul></li>
</ul>
</body>
三、效果展示
