<style type="text/css">
body{
background-color: black;
}
ul{
font-size: 0;
}
#ul1 li{
list-style: none;
display:inline-block;
margin-left: 20px;
border-radius: 15px;
border: 1px solid;
border-color:#f78f73;
height: 60px;
font-size: 20px;
80px;
line-height: 50px;
text-align: center;
background-color:#c895e0;
font-weight: bold;
color:white;
box-shadow: 2px 2px 2px #d2c0da;
-webkit-transition:all 5s ease-in-out;
position:relative;
}
a{
text-decoration: none;
color: green;
-webkit-transition:all 3s ease-in-out;
}
#ul1 li:hover a{
color: white;
}
#ul1 li:hover {
background-color: #fa6ab1;
border-radius:100%;
box-shadow: 2px 2px 2px #800473;
}
#ul2{
position: absolute;
top: 100%;
left:0px;
display: none;
}
#ul2 li{
background-color: transparent;
border: 0;
80px;
}
#ul1 li:hover #ul2 {
display: block;
}
</style>
</head>
<body>
<div>
<ul id="ul1">
<li><a href="#">首页</a></li>
<li><a href="#">搜索</a>
<ul id="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></li>
<li><a href="#">新闻</a></li>
</ul>
</div>