css导航菜单

来源：互联网发布：linux sh 输入密码编辑：程序博客网时间：2024/05/16 06:53

1.纯css下拉菜单

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>css下拉菜单</title><style type="text/css">*{margin:0;padding:0;}#header{background-color:#eee;height:50px;margin-top:50px;}#nav > li{list-style:none;float:left;margin: 0px 10px;padding:10px;width:100px;}#nav> li:hover ul {display:block;}#nav > li:hover{background-color:#808080;-moz-border-radius:10px;-webkit-border-radius:10px;}#nav li ul{display:none;}#nav li ul li{list-style:none;margin:10px 0 0 0;}#nav li ul li a{display:block;padding:5px 10px;color:#A2E200;text-decoration:none;}#nav li ul li:hover a{background-color:#606060;-moz-border-radius:5px;-webkit-border-radius:5px;}#nav li span {cursor:pointer;margin:0px 10px;font-weight:bold;}</style></head><body><div id="header"><ul id="nav"><li><span>Menu 1</span><ul><li><a href="#">Menu item 1</a></li><li><a href="#">Menu item 1</a></li><li><a href="#">Menu item 1</a></li></ul></li><li><span>Menu 2</span><ul><li><a href="#">Menu item 1</a></li><li><a href="#">Menu item 1</a></li><li><a href="#">Menu item 1</a></li></ul></li><li><span>Menu 3</span><ul><li><a href="#">Menu item 1</a></li><li><a href="#">Menu item 1</a></li><li><a href="#">Menu item 1</a></li></ul></li></ul></div></body></html>

2.纯css绿色菜单，无图片

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>css sprite</title><style type="text/css">*{margin:0px;padding:0px;}a{text-decoration:none;color:#000;}a:hover{text-decoration:underline;}ul{list-style:none;}#nav{margin-top:50px;}#nav ul {border-bottom:2px solid #70b133;height:33px;padding-left:200px;}#nav ul li{float:left;display:block;background:#fff;height:33px;line-height:33px;margin-top:-1px;padding-left:20px;padding-right:20px;border-top:1px solid #70b133;border-left:1px solid #70b133;border-right:1px solid #70b133;border-top-right-radius:5px;border-top-left-radius:5px;}#nav ul li:hover{float:left;display:block;background:#70b133;height:33px;line-height:33px;padding-left:20px;padding-right:20px;border:1px solid #70b133;}#nav ul li.current{float:left;display:block;background:#70b133;height:33px;line-height:33px;padding-left:20px;padding-right:20px;border:1px solid #70b133;}#nav ul li:hover a{color:#fff;}</style></head><body><div id="nav"><ul><li class="current"><a href="#">首页</a></li><li><a href="#">CSS模板</a></li><li><a href="#">后台模板</a></li><li><a href="#">图标图片</a></li><li><a href="#">CSS代码</a></li><li><a href="#">CSS图表</a></li><li><a href="#">CSS菜单</a></li></ul></div></body></html>

3.css和js菜单，兼容ie6

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>css sprite</title><style type="text/css">body{font:normal 11px verdana;}ul{margin:0;padding:0;list-style:none;width:150px;border-bottom:1px solid #ccc;}ul li{position:relative;}li ul{position:absolute;left:149px;top:0;display:none;}ul li a{display:block;text-decoration:none;color:#777;background:#fff;/*IE6 Bug*/padding:5px;border: 1px solid #ccc; border-bottom:0;}/*ie6下的bug*//* Holly Hack. IE Requirement \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */li:hover > ul, li.over > ul{display:block;}</style><script type="text/javascript">// JavaScript DocumentstartList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";}node.onmouseout=function() {this.className=this.className.replace(" over", "");}}}}}window.onload=startList;</script></head><body><ul id="nav"><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Offices</a></li></ul></li><li><a href="#">Services</a><ul><li><a href="#">Web Design</a></li><li><a href="#">Internet Marketing</a></li><li><a href="#">Hosting</a></li><li><a href="#">Domain Names</a></li><li><a href="#">Broadband</a></li></ul></li><li><a href="#">Contact Us</a><ul><li><a href="#">United Kingdom</a></li><li><a href="#">France</a></li><li><a href="#">USA</a></li><li><a href="#">Australia</a></li></ul></li></ul></body></html>

总结： li:hover ie6不支持 ie7及以上支持