<ul> <li><a class="current_nav" href="#">网站首页</a> <ul> <span class="arrow"></span> <li class="twomenu"><a href="#">域名查询</a></li> <li class="twomenu"><a href="#">管理域名记录</a> <ul> <span class="arrow"></span> <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> </li> <li class="twomenu"><a href="#">域名查询</a></li> <li class="twomenu"><a href="#">管理域名记录</a></li> <li class="twomenu"><a href="#">域名查询</a></li> </ul> </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="#" class="last_nav">客户服务专区</a></li> </ul>
推荐你使用Twitter的bootstrap框架，这样的导航很好解决的,网址：http://wrongwaycn.github.com/bootstrap/docs/
<div id="topnavall"> <div id="topnav"> <ul> <!--<li><a href="#"></a></li>--> <li><a href="#">关于我们 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <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="#">CSS菜单</a></li> <li><a href="#">浏览器兼容</a></li> <li><a href="#">滚动条相关</a></li> <li><a href="#">圆角矩形专题</a></li> <li><a href="#">CSS特效欣赏专题</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">公司荣誉</a></li> <!--<li><a href="#"></a></li>--> <li><a href="#">关于我们关于我们 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <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="#">CSS菜单</a></li> <li><a href="#">浏览器兼容</a></li> <li><a href="#">滚动条相关</a></li> <li><a href="#">圆角矩形专题</a></li> <li><a href="#">CSS特效欣赏专题</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">人才招聘</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </div>
#topnavall, #topnav, #topnav ul, #topnav ul li, #topnav ul li a { overflow:visible; }#topnavall { float:left; width:900px; padding-top:200px; }#topnav { width:900px; height:20px; background:#f7f7f7; }#topnav ul ul { visibility:hidden; height:auto; position:absolute; background:#FFF; padding:0; margin:0; filter:alpha(opacity=90); -moz-opacity:0.9;opacity:0.9; }#topnav ul ul { width:120px; left:0; top:20px; line-height:normal; }#topnav li { position:relative; z-index:500; float:left; display:block; height:20px; line-height:20px; padding:0 10px; }#topnav table { _margin-top:-5px; }#topnav ul li a { _overflow:hidden; display:inline-block; height:20px; line-height:20px; }#topnav ul li a:hover { border-bottom: solid 0px #000; overflow:visible; }#topnav li:hover ul, #topnav a:hover ul { visibility:visible; line-height:normal; }#topnav ul li ul li { width:auto; float:none; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }#topnav ul li ul li a { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #fafafa; border-bottom-color:#eee; border-top-color:#fafafa; background:#f3f3f3; }#topnav ul li ul li a:hover { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #F90; border-bottom-color:#eee; border-top-color:#fafafa; background:#eee; }一个例子 你自己看下 浏览器兼容也做好了。如果你要横向排列只要 更改这里 #topnav ul li ul li { width:auto; float:left; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }
要实现相对定位有一个条件，就是他的前一个元素不能是默认的定位，也就是说把他的父元素改成不是默认的定位属性就可以实现相对定位
li 本身 float：left
li 里面弄个 div 实现 position：relative
也就是 li 完全只承担了 float：left的功能
