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>
HTML：
<div id="d1">
<ul>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
<li><a href="#">啊哈</a></li>
</ul>
<input id="tex" type="text" />
<input id="btn" type="button" value="我搜"/>
</div>
CSS：
<!--
*{padding: 0margin:0}
#d1{
position: relative
}
ul{
width: 650px
height: 34px
list-style: none
background:#0D3362
float: left
padding-left: 2px
}
li{
width: 45px
height:32px
float: left
}
li:hover{
/* width: 43px
height: 30px */
border: #fff dotted 1px
border-bottom: none
margin: -1px -1px 1px -1px
}
a{
font-size: 13px
font-weight: bold
text-align: center
/*vertical-align: 50%*/
margin: 8px 8px 1px 8px
color:#92D8E0
text-decoration: none
float: left
}
#tex{
width:100px
height: 22px
position: absolute
left: 420px
_left: -230px
top: 3px
}
#btn{
width:35px
height: 22px
border: none
background: #499BFF
position: absolute
left: 528px
_left: -120px
top: 4px
}
-->
这个网站是用的JS脚本生成的 地址给你http://www.ahauto.com//js/nav.js
网页代码如下
<html>
<head>
<style>@charset "gb2312"
* { margin: 0px autopadding: 0px}
body { font-family:Verdana, "宋体"font-size: 12pxbackground:#FFFFFF url(http://www.ahauto.com/images/body_bg.jpg) top repeat-xcolor:#666666width:960pxmargin: 0px autopadding: 0px }
ul, dl { list-style-type: none}
img { border:none}
a { color:#666666text-decoration: none}
a:hover { color:#FF0000text-decoration: underline}
.clear { clear:both}
.en { font-family:Verdana }
/***************/
#main_nav { width:960pxheight:64pxbackground:url(http://www.ahauto.com/images/nav_bg.jpg)}
#main_nav1 { float:left }
#main_nav1 h2 { float:leftmargin-top:6px}
#main_nav1 h3 { float:leftmargin-left:25px_margin-left:17pxline-height:18pxmargin-top:8px }
#main_nav1 h3 a { float:leftfont-size:12pxfont-size:12pxcolor:#FFFFFFfont-weight:normalmargin-right:12pxdisplay:block}
#main_nav1 h3 a:hover { color:#3A588Abackground:#FFFFFFtext-decoration:none}
#mini_nav { height:31pxline-height:31pxbackground:url(http://www.ahauto.com/images/mini_navbg.jpg)border:1px solid #C7D2DFborder-top:nonecolor:#C7D2DFmargin-bottom:8px }
#mini_nav a { color:#014DA2margin:auto 3px}
#mini_nav span { color:#014DA2font-weight:boldmargin-left:10pxmargin-right:5px }
</style>
</head><body>
<div id="main_nav" style="margin-bottom:5px">
<div id="main_nav1" style=" width:155pxpadding-left:18pxpadding-top:7px">
<h2><a href="/news.html"><img src="/images/main_nav_li1.jpg" alt="新闻" /></a></h2>
<h3 style="width:110px"><a href="/channels/xincheshangshi/index.html">新车</a><a href="/channels/reduction/index.html">降价</a><a href="/channels/company/index.html">厂家</a><a href="/channels/industry/index.html">业界</a><a href="/channels/fashion/index.html">时尚</a><a href="/channels/anhuiqiche/index.html">安徽</a></h3>
</div>
<div id="main_nav1" style=" width:95pxpadding-left:23pxpadding-top:7px">
<h2><img src="/images/main_nav_li2.jpg" /></h2>
<h3 style="width:40px"><a href="">咨询</a><a href="http://bbs.ahauto.com/forumdisplay.php?fid=45">驾校</a></h3>
</div>
<div id="main_nav1" style=" width:310pxpadding-left:5pxpadding-top:7px">
<h2><img src="/images/main_nav_li3.jpg" /></h2>
<h3 style="width:260px"><a href="/auto/index.html">报价</a><a href="/auto/stores.php">经销商</a><a href="/channels/hangqing/index.html">行情</a><a href="/auto/calculator.php?type=fee">费用计算</a><a href="/channels/baoxian/index.html">保险</a><a href="/channels/gouchezhinan/index.html">导购</a><a href="/auto/photo.html">图片</a><a href="/auto/index.html">车型库</a><a href="/auto/map.php">地图</a><a href="/auto/compare.php" target="_blank">车型对比</a><a href="/channels/daikuan/index.html">贷款</a><a href="/channels/xuanche/index.html">评测</a></h3>
</div>
<div id="main_nav1" style=" width:180pxpadding-left:20pxpadding-top:7px">
<h2><img src="/images/main_nav_li4.jpg" /></h2>
<h3 style="width:120px"><a href="/channels/chezhubaogao/index.html">车主报告</a><a href="/channels/jiashizhinan/index.html">驾驶指南</a><a href="/channels/weixiubaoyang/index.html">维修保养</a><a href="http://bbs.ahauto.com/forumdisplay.php?fid=21">汽车美容</a></h3>
</div>
<div id="main_nav1" style=" width:135pxpadding-left:18pxpadding-top:7px">
<h2><img src="/images/main_nav_li5.jpg" /></h2>
<h3 style="width:80px"><a href="http://bbs.ahauto.com">论坛</a><a href="http://bbs.ahauto.com/forumdisplay.php?fid=30">活动</a><a href="/qa">问答</a><a href="/groupBuying.php">团购</a></h3>
</div>
</div>
<div class="clear"></div>
<div id="mini_nav" style="display:none"><span>网上购车:</span><a href="hefei" siteID="2">合肥</a>| <a href="wuhu" siteID="3">芜湖</a>| </div>
</body></html>
