首页 > 代码库 > 用css实现三级导航菜单
用css实现三级导航菜单
主要使用css的hover伪类来实现该功能。
主要思路：先搭出三级菜单的框架，然后使用css的：hover来实现！
代码如下：
<!doctype html><html><head> <meta charset="utf-8"> <title>三级导航菜单</title> <style type="text/css"> body{font-size: 12px;} .menu1, .menu1 ul { list-style: none; width: 120px; background-color: #f9f9f9; border: 1px solid #ccc; border-bottom: 0; margin: 0; padding: 0; text-align: left; text-indent: 10px; } .menu1 a:hover { color: #336666; background-color: #F5E3C0; } .menu1 a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #ccc; width: 120px; line-height: 22px; } .menu1 .active { position: relative; } .menu1 li:hover ul ul { left: -999px; } .menu1 li:hover ul { left: 120px; } .menu1 li li:hover ul { position: absolute; left: 120px; } .menu1 .active ul { position: absolute; top: -1px; left: -999px; } </style></head><body> <div class="menu"> <ul class="menu1"> <li><a href="###">Home</a></li> <li><a href="###">About Me</a></li> <li class="active"><a>Tutorials</a> <ul> <li><a href="###">Submenu1</a></li> <li><a href="###">Submenu2</a></li> <li class="active"><a href="">Submenu3</a> <ul> <li><a href="###">Submenu31</a></li> <li><a href="###">Submenu32</a></li> <li><a href="###">Submenu33</a></li> <li><a href="###">Submenu34</a></li> <li><a href="###">Submenu35</a></li> </ul> </li> <li><a href="###">Submenu4</a></li> <li><a href="###">Submenu5</a></li> </ul> </li> <li><a href="###">Gallery</a></li> <li><a href="###">Contact Me</a></li> </ul> </div> </body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级导航菜单</title>
<style type="text/css">
body{font-size: 12px;}
.menu1, .menu1 ul {
list-style: none;
width: 120px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-bottom: 0;
margin: 0;
padding: 0;
text-align: left;
text-indent: 10px;
}
.menu1 a:hover {
color: #336666;
background-color: #F5E3C0;
}
.menu1 a {
display: block;
text-decoration: none;
color: #000;
border-bottom: 1px solid #ccc;
width: 120px;
line-height: 22px;
}
.menu1 .active {
position: relative;
}
.menu1 li:hover ul ul {
left: -999px;
}
.menu1 li:hover ul {
left: 120px;
}
.menu1 li li:hover ul {
position: absolute;
left: 120px;
}
.menu1 .active ul {
position: absolute;
top: -1px;
left: -999px;
}
</style>
<script type="text/javascript" href="http://www.mamicode.com/js/jQuery.js"></script>
</head>
<body>
<div class="menu">
<ul class="menu1">
<li><a href="http://www.mamicode.com/###">Home</a></li>
<li><a href="http://www.mamicode.com/###">About Me</a></li>
<li class="active"><a>Tutorials</a>
<ul>
<li><a href="http://www.mamicode.com/###">Submenu1</a></li>
<li><a href="http://www.mamicode.com/###">Submenu2</a></li>
<li class="active"><a href="">Submenu3</a>
<ul>
<li><a href="http://www.mamicode.com/###">Submenu31</a></li>
<li><a href="http://www.mamicode.com/###">Submenu32</a></li>
<li><a href="http://www.mamicode.com/###">Submenu33</a></li>
<li><a href="http://www.mamicode.com/###">Submenu34</a></li>
<li><a href="http://www.mamicode.com/###">Submenu35</a></li>
</ul>
</li>
<li><a href="http://www.mamicode.com/###">Submenu4</a></li>
<li><a href="http://www.mamicode.com/###">Submenu5</a></li>
</ul>
</li>
<li><a href="http://www.mamicode.com/###">Gallery</a></li>
<li><a href="http://www.mamicode.com/###">Contact Me</a></li>
</ul>
</div>
</body>
</html>
用css实现三级导航菜单