你说的导航菜单嘛 横排还是竖排的？根据我理解的意思，分别给你弄了一个。供参考。
兼容性肯定没问题哈。你可以根据自己需求，将其进行一些微调。比如将onmouseover
改成onclick。
<script language="javascript">// JavaScript Document
startList = 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>
<style type="text/css">
<!--
body {
font: normal 11px verdana
}
ul {
margin: 0
padding: 0
list-style: none
width: 150px /* Width of Menu Items */
border-bottom: 1px solid #ccc
}
ul li {
position: relative
}
li ul {
position: absolute
left: 149px /* Set 1px less than menu width */
top: 0
display: none
}
/* Styles for Menu Items */
ul li a {
display: block
text-decoration: none
color: #777
background: #fff /* IE6 Bug */
padding: 5px
border: 1px solid #ccc /* IE6 Bug */
border-bottom: 0
}
/* 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 } /* The magic */
-->
</style>
<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>
横排的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>CSS菜单－－下拉菜单</title>
<style>
/*Author:5key.net*/
body{
background-color:white
font-size:12px
font-family:Arial, Helvetica, sans-serif
margin:0px
padding:0px
color:white
}
ul,li{
margin:0px
padding:0px
}
li{
display:inline
list-style:none
list-style-position:outside
text-align:center
font-weight:bold
float:left
}
a:link{
color:#336601
text-decoration:none
float:left
width:100px
padding:3px 5px 0px 5px
}
a:visited{
color:#336601
text-decoration:none
float:left
padding:3px 5px 0px 5px
width:100px
}
a:hover{
color:white
float:left
padding:3px 3px 0px 20px
width:88px
text-decoration:none
background-color:#539D26
}
a:active{
color:white
float:left
padding:3px 3px 0px 20px
width:88px
text-decoration:none
background-color:#BD06B4
}
#nav{
width:600px
height:30px
border-bottom:0px
padding:0px 5px
position:absolute
z-index:1
left: 198px
top: 25px
}
.list{
line-height:20px
text-align:left
padding:4px
font-weight:normal
}
.menu1{
width:120px
height:auto
margin:6px 4px 0px 0px
border:1px solid #9CDD75
background-color:#F1FBEC
color:#336601
padding:6px 0px 0px 0px
cursor:hand
overflow-y:hidden
filter:Alpha(opacity=70)
-moz-opacity:0.7
}
.menu2{
width:120px
height:18px
margin:6px 4px 0px 0px
background-color:#F5F5F5
color:#999999
border:1px solid #EEE8DD
padding:6px 0px 0px 0px
overflow-y:hidden
cursor:hand
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>
如果只用css的话就这么写吧
.level2{display:none
}
.level1 > li:hover > .level2{
display:block
}
html里大概这样的结构
<ul class="level1"><li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
<li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
<li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
<li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
</ul>
