CSS下拉菜单代码2
<!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>下拉菜单</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-family:微软雅黑;
width:900px;
margin:50px auto;
font-size:12px;
}
a{
color:#fff;
text-decoration:none;
}
#nav{
width:900px;
height:38px;
background:pink;
}
ul{
list-style-type:none;
position:relative;
}
ul li {
float:left;
width:88px;
height:30px;
line-height:30px;
background:green;
border-right: 2px solid #fff;
text-align:center;
}
ul li ul li{
height:28px;
background:orange;
border-top:2px solid #fff;
}
ul li a{
display:block;
width:90px;
height:30px;
}
ul li a:hover{
background:#004000;
}
ul li ul{
height:28px;
width:720px;
position:absolute;
left:0;
top:28;
overflow:hidden;
visibility:hidden;
}
ul li:hover ul{
visibility:visible;
}
</style>
</head>
<body>
<ul>
<li><a href="###">视频</a></li>
<li><a href="###">健康</a></li>
<li><a href="###">房产</a>
<ul>
<li><a href="###">广州</a></li>
<li><a href="###">北京</a></li>
<li><a href="###">上海</a></li>
<li><a href="###">深圳</a></li>
<li><a href="###">天津</a></li>
<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>
<li><a href="###">读书</a>
<ul>
<li><a href="###">连载</a></li>
<li><a href="###">书库</a></li>
<li><a href="###">原创</a></li>
<li><a href="###">文学</a></li>
<li><a href="###">VIP全本</a></li>
<li><a href="###">排行榜</a></li>
<li><a href="###">书讯</a></li>
<li><a href="###">书评</a></li>
<li><a href="###">文摘</a></li>
<li><a href="###">访谈</a></li>
<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>
<li><a href="###">激战2</a></li>
<li><a href="###">洛奇英雄传</a></li>
<li><a href="###">英雄联盟</a></li>
<li><a href="###">星球大战</a></li>
<li><a href="###"> 最终幻想14</a></li>
<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>
</ul>
</body>
</html></td>
</tr>
</table>
编后记
采编：ZOUDECAO（微信/QQ:82075451） E_mail: zdco@qq.com
感谢作者辛苦原创！部分文章未能与原作者联系，如侵权请联系我们删除。转载请注明出处！如果觉得本文对你有启发，可以点击一键转发，分享给我们身边喜欢的朋友。因为分享，所以快乐。
本文来自 德艺志 转载请注明；
本文地址：http://www.zoudecao.net/post/1136.html。