您的位置：首页 > 其它

简洁的下拉菜单列表

2015-10-25 11:00 399 查看

比较适合初学者的纯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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航