新更新，纯CSS下拉列表菜单，超实用！（依然欢迎纠错）
北京/产品设计师/14年前/10777浏览
版权
新更新，纯CSS下拉列表菜单，超实用！（依然欢迎纠错）
应大家要求，上传不用JAVASCRIPT就可以实现的纯CSS下拉菜单，主要用样式，鼠标链接动作等实现，已经多浏览器支持。测试无误。供大家学习参考。附下载文件。HTML的
应大家要求，上传不用JAVASCRIPT就可以实现的纯CSS下拉菜单，主要用样式，鼠标链接动作等实现，已经多浏览器支持。测试无误。供大家学习参考。
附下载文件。HTML的代码。
附下载文件。HTML的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 type="text/css">
.menu {
font-family: verdana, sans-serif;
width:750px;
position:relative;
font-size:0.85em;
padding-bottom:250px;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:139px;
height:3em;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#ccc;
padding-left:10px;
line-height:3em;
}
* html .menu ul li a, .menu ul li a:visited {
width:149px;
w\idth:139px;
}
.menu ul li ul {
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
background:#999;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display:block;
background:#EFEFEF;
color:#000;
height:auto;
line-height:1.2em;
padding:5px 10px;
width:129px
}
.menu ul li:hover ul li a.drop {
background:#CCC;
}
.menu ul li:hover ul li a:hover {
background:#ccc;
color:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:150px;
top:0;
width:150px;
}
.menu ul li:hover ul li:hover ul.left {
left:-150px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="drop" href="#">INDEX
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#" title="AHAHAHHAHA">This index</a></li>
<li><a href="#" title="AHAHAHHAHA">This index2</a></li>
<li><a href="#" title="AHAHAHHAHA">This index3</a></li>
<li><a href="#" title="AHAHAHHAHA">This index4</a></li>
<li><a href="#" title="AHAHAHHAHA">This index5</a></li>
<li><a href="#" title="AHAHAHHAHA">This index6</a></li>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="#">IMAGES
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#" title="婴幼儿图片">婴幼儿图片</a></li>
<li><a href="#" title="小学生看图说话">小学生看图说话</a></li>
<li><a href="#" title="中学生图片">中学生图片</a></li>
<li><a href="#" title="高中生图片">高中生图片</a></li>
<li><a href="#" title="学生装图片">学生装图片</a></li>
<li><a href="#" title="护士制服图片">护士制服图片</a></li>
<li><a href="#" title="成人图片">成人图片</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="#">MUSIC
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#" title="中文歌曲">中文歌曲</a></li>
<li><a href="#" title="日韩歌曲">日韩歌曲</a></li>
<li><a href="#" title="欧美歌曲">欧美歌曲</a></li>
<li><a href="#" title="纯音乐">纯音乐</a></li>
<li><a href="#" title="胎教音乐">胎教音乐</a></li>
<li><a href="#" title="床上音乐">床上音乐</a></li>
<li><a href="#" title="助兴歌曲">夜店DJ</a></li>
<li><a href="#" title="铞丝必听">AAAAAAAA</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="#">VIDEO
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#" title="影视">电影</a></li>
<li><a href="#" title="动漫">动画</a></li>
<li><a href="#" title="你懂得">成人</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="#">GAMES<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#" title="单机">单机大作</a></li>
<li><a href="#" title="网游">网络游戏</a></li>
<li><a href="#" title="其他">其他机种</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>
2
举报
声明
110
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
2登录即可同步推荐记录哦
99+登录即可加入我的收藏
评论登录即可评论想法
分享分享
1