http://www.jimzhan.com/demo/ie6_li_display_inline.html
那样的话,得有宽度保证了.要不然会出去的(比如最后一个)
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>nav</title>
<style type="text/css">
ul{list-style:noneheight:32pxline-height:32px}
li{float:leftpadding:5px}
li span{display:none}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1.4')</script>
</head>
<body>
<ul>
<li><a href="#jimzhan.com">首页</a><span>这里要显示的内容</span></li>
<li><a href="#jimzhan.com">blog</a></li>
<li><a href="#jimzhan.com">super fashion</a><span>jimzhan.com</span></li>
<li><a href="#jimzhan.com">readead</a></li>
</ul>
<script>
$(function(){
$('li').hover(function(){
$('span',this).show()
},function(){
$('span',this).hide()
})
})
</script>
</body>
</html>
给你个源码作为参考 用纯CSS+HTML编写而成____________________________________
Suckerfish下拉菜单
<!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>
<title>Untitled Page</title>
<style type="text/css">
ul.nav,ul.nav ul
{
margin:0
padding:0
list-style-type:none
font:left
}
ul.nav li
{
float: left
width: 8em
background-color: #8BD400
}
ul.nav li ul
{
width: 8em
position: absolute
left: -999em
}
.nav li:hover ul
{
left: auto
}
ul.nav a
{
display: block
color: #2B3F00
text-decoration: none
padding: 0.3em 1em
border-right: 1px solid #486B02
border-left: 1px solid #E4FFD3
}
ul.nav li li a
{
border-bottom: 1px solid #486B02
border-top: 1px solid #486B02
border-right: 0
border-left: 0
}
ul.nav li:last-child a
{
border-right: 0
border-bottom: 0
}
ul a:hover, ul a:focus
{
color: #E4FFD3
background-color: #6DA203
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">SilverBack</a></li>
<li><a href="#">Font Deck</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consultancy</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
按照你的结构，考虑到ie6不支持li:hover伪类写法，所以用jQuery解决了。<style type="text/css">
*{margin:0padding:0font-size:14pxline-height:35px}
a{color:#0099cctext-decoration:none}
ul,li{list-style:none}
#menu{width:800pxheight:35pxbackground:#333333}
#menu ul li{float:leftwidth:100pxmargin-left:1pxposition:relative}
#menu ul li ul li{margin-left:0}
#menu ul li a{width:100%height:100%text-align:centerdisplay:blockbackground:#666666}
/*二级栏目*/
#menu ul li ul{display:noneposition:absoluteleft:0top:35px}
#menu ul li ul a{background:#333333}
</style>
<div id="menu">
<ul>
<li><a href="#">一级栏目1</a></li>
<li><a href="#">一级栏目1</a></li>
<li><a href="#">一级栏目3</a>
<ul>
<li><a href="#">二级栏目1</a></li>
<li><a href="#">二级栏目2</a></li>
<li><a href="#">二级栏目3</a></li>
</ul>
</li>
<li><a href="#">一级栏目4</a>
<ul>
<li><a href="#">二级栏目4</a></li>
<li><a href="#">二级栏目5</a></li>
<li><a href="#">二级栏目6</a></li>
</ul>
</li>
<li><a href="#">一级栏目5</a></li>
</ul>
</div>
<script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库-->
<script type="text/javascript">
$(function(){
$("#menu ul > li").hover(function(){
$(this).find("ul").stop(true,true).show(100)
},function(){
$(this).find("ul").stop(true,true).hide(100)
})
})
</script>
