悬浮变色这种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
font-size: 13px;
text-align: center;
}
ul li{
height: 25px;
border: 1px solid white;
width: 100px;
list-style: none;
background-color: palevioletred;
color: white;
}
#sub li{
height: 20px;
width: 60px;
background-color: burlywood;
}
li:hover{
background-color: blueviolet;
}
#sub li:hover{
background-color: plum;
}
.button ul li{
position: relative;
left: 100px;
opacity: 0;
}
.button:hover li{
opacity: 1;
}
</style>
</head>
<body>
<ul>
<li class="button">
<span>湖北</span>
<ul id="sub">
<li>武汉</li>
<li>宜昌</li>
<li>黄冈</li>
<li>恩施</li>
</ul>
</li>
<li class="button">
<span>湖南</span>
<ul id="sub">
<li>长沙</li>
<li>衡阳</li>
<li>湘潭</li>
<li>张家界</li>
</ul>
</li>
<li class="button">
<span>广东</span>
<ul id="sub">
<li>广州</li>
<li>汕头</li>
<li>深圳</li>
<li>珠海</li>
</ul>
</li>
<li class="button">
<span>上海</span>
<ul id="sub">
<li>虹口</li>
<li>黄浦</li>
<li>徐汇</li>
<li>长宁</li>
</ul>
</li>
<li class="button">
<span>北京</span>
<ul id="sub">
<li>大兴区</li>
<li>海淀区</li>
<li>怀柔区</li>
<li>西城区</li>
</ul>
</li>
</ul>
</body>
</html>