您的位置：首页 > 其它

竖向三级弹出菜单，模仿京东商城的首页菜单效果

2011-03-15 16:45 357 查看

代码如下：

<!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>
<!--
<script type="text/javascript" language="javascript" src="js/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("div.menu>ul>li").mouseover(function() {
var currentIndex = $("div.menu>ul>li").index(this);
$(this).find("ul").css("top", currentIndex * 22 * -1);
});
});
</script>
-->
<style type="text/css">
/* common styling */
.menu { font-family: arial, sans-serif; width: 106px; height: 150px; position: relative; margin: 0; font-size: 11px; margin: 50px 0; }
.menu ul li a, .menu ul li a:visited { display: block; text-decoration: none; color: #000; width: 104px; height: 20px; text-align: center; color: #fff; border: 1px solid #aaa; background: #710069; line-height: 20px; font-size: 11px; overflow: hidden; }
.menu ul { padding: 0; margin: 0; list-style-type: none; }
.menu ul li { float: left; margin-right: 1px; position: relative; }
.menu ul li ul { display: none; }
/* specific to non IE browsers */
.menu ul li:hover a { color: #fff; background: #36f; }
.menu ul li:hover ul { display: block;  width: 105px;  position:absolute ; top: 0px; left: 105px; }
.menu ul li:hover ul li a.hide { background: #6a3; color: #fff; }
.menu ul li:hover ul li:hover a.hide { background: #6fc; color: #000; }
.menu ul li:hover ul li ul { display: none; }
.menu ul li:hover ul li a { display: block; background: #eee; color: #000; }
.menu ul li:hover ul li a:hover { background: #6fc; color: #000; }
.menu ul li:hover ul li:hover ul { display: block; position: absolute; left: 105px; top: 0px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<!-- 第一个LI      开始 -->
<li>
<a class="hide" href="http://www.baidu.com" target="_blank">湖南省</a>
<!--[if lte IE 6]>
<a href="http://www.sina.com.cn">湖南省
<table>
<tr>
<td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">长沙市</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">株洲市</a></li>
<li><a href="../menu/form.html" title="Styling forms">湘潭市</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">永州市</a></li>
<li>
<a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">常德市 ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">常德市 >
<table>
<tr>
<td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">武陵区</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">鼎城区</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">桃源县</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">张家界市</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">益阳市</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">岳阳市</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">衡阳市</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">郴州市</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<!-- 第一个LI      结束 -->

<!-- 第二个LI      开始 -->
<li>
<a class="hide" href="http://www.baidu.com" target="_blank">北京市</a>
<!--[if lte IE 6]>
<a href="http://www.sina.com.cn">北京市
<table>
<tr>
<td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">北京</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">东城区</a></li>
<li><a href="expand.html" title="an enlarging unordered list">西城区</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">崇文区</a></li>
<li><a href="cross.html" title="non-rectangular links">宣武区</a></li>
<li><a href="jigsaw.html" title="jigsaw links">朝阳区</a></li>
<li><a href="circles.html" title="circular links">丰台区</a></li>
<li><a href="circles.html" title="circular links">海淀区</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<!-- 第二个LI      结束 -->
</ul>
</div>
</body>
</html>


效果图：

谢谢浏览！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航