简洁的下拉菜单列表

最新推荐文章于 2021-08-04 00:42:40 发布

为你写诗_xue

最新推荐文章于 2021-08-04 00:42:40 发布

阅读量379

点赞数

分类专栏： WEB前端文章标签： css

本文链接：https://blog.csdn.net/LiuShuXiaDeRiLuo/article/details/49402035

版权

WEB前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

比较适合初学者的纯css下拉菜单列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css导航</title>
<style>
.nav .menu {
list-style-type:none;
text-decoration:none;
margin:5px;
float:left;
width:80px;
text-align:center;
padding:0px;
}
.nav .menu a{
text-decoration:none;
color:#FFFBF0;
}
.nav .menu a:hover{
font-weight:bold;

}
.menu div{
background:#2A3F55;
border:1px solid #2A1FFF;
height:auto;

}
.menuItem{
list-style:none;
padding:0px;
display:none;

}
.menu div:hover .menuItem{
display:block;
color:#FFF;
}

</style>
</head>
<body>
<div class="nav">
<ul >
<li class="menu" ><div><a href="#">广东</a>
<ul class="menuItem">
<li><a href="#">广州</a></li>
<li><a href="#">深圳</a></li>
<li ><a href="#">珠海</a></li>
</ul>
</div>
</li>
<li class="menu"><div><a href="#">广西</a></div></li>
<li class="menu"><div><a href="#">四川</a></div></li>
<li class="menu"><div><a href="#">北京</a></div></li>
<li class="menu"><div><a href="#">天津</a></div></li>
<li class="menu"><div><a href="#">重庆</a></div></li>
</ul>

</div>
</body>
</html>