jquery横向下拉三级菜单效果怎么做
1个回答
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级菜单</title>
<style type="text/css">
ul,li{ padding:0; margin:0;}
.menu{ margin:100px 0;}
.menu ul li{ width:100px; text-align:center; height:30px; line-height:30px; background:#063; border-right:1px solid #000; float:left; list-style:none; position:relative; padding:0; margin:0;}
.menu ul li ul{ position:absolute; display:none }
.menu ul li:hover >ul{ display:block }
.menu ul li ul li{ float:none; background:#06C; border-right:none;}
.menu ul li ul li ul{ position:absolute; top:0; left:100px; display:none}
.menu ul li ul li ul li{ background:#39F }
.menu ul li a{ color:#fff; text-decoration:none;}
</style>
</head>
<body>
<!--直接通过css实现就是这个样式写的，这些不方便，不需要加入jquery实现(深圳网站建设www.sz886.com)-->
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">栏目1</a>
<ul>
<li>
<a href="javascript:;">二级</a>
<ul>
<li>
<a href="javascript:;">三级1</a>
</li>
<li>
<a href="javascript:;">三级2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
