<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>仿菜单</title>
<style type="text/css">
body{font-size:14px}
ul{margin:0padding:0list-style:none}
a{text-decoration:nonecolor:#000}
#menu{position:absolutetop:0left:100pxwidth:780px}
#menu li{float:leftheight:34pxline-height:34px}
#menu li a{ display:blockfont-weight:boldbackground:url(link.gif) left toppadding-left:20px}
#menu span{display:blockbackground:url(link.gif) no-repeat right toppadding-right:20px}
#menu li a:hover{background:url(hover.gif) no-repeat left topcolor:#C30}
#menu li a:hover span{background:url(hover.gif) no-repeat right top}
#sub_menu {position:absolutetop:35pxfont-size:12pxline-height:2em}
#sub_menu #sub_2{margin-left:150px}
#sub_menu #sub_3{margin-left:250px}
#sub_menu #sub_4{margin-left:350px}
.dis { display:block}
.undis { display:none}
</style>
<script type="text/javascript" language="javascript">
<!--
function show(n){
//如果有N个标签,就将i<=N
for(var i=1i<=6i++){
document.getElementById('sub_'+i).className='undis'
}
document.getElementById('sub_'+n).className='dis'
}
-->
</script>
</head>
<!--急冲冲赶出来的，还没有什么时间去添加一些注析，你要是有什么不明白的，可以问我。其他的一些小细节，你再自己修改啦！-->
<body>
<div id="Nav">
<div id="menu">
<ul>
<li><a href="#" onmouseover="show(1)"><span>凯撒首页</span></a></li>
<li><a href="#" onmouseover="show(2)"><span>最新动态页</span></a></li>
<li><a href="#" onmouseover="show(3)"><span>产品及预定中心页</span></a></li>
<li><a href="#" onmouseover="show(4)"><span>帮助及查询中心页</span></a></li>
<li><a href="#" onmouseover="show(5)"><span>会员俱乐部页</span></a></li>
<li><a href="#" onmouseover="show(6)"><span>凯撒论坛页</span></a></li>
</ul>
</div>
<div id="sub_menu">
<div id="sub_1" class="undis" ></div>
<div id="sub_2" class="undis" ><a href="#">聚焦凯撒</a>| <a href="#">国内新闻</a>| <a href="#">国际新闻</a></div>
<div id="sub_3" class="undis" ><a href="#">聚焦凯撒</a>| <a href="#">国内新闻</a>| <a href="#">国际新闻</a>聚焦凯撒</a>| <a href="#">国内新闻</a></div>
<div id="sub_4" class="undis" ><a href="#">预定流程</a>| <a href="#">订单查询</a>| <a href="#">在线答疑</a><a href="#">签证服务</a>| <a href="#">出游宝典</a>| <a href="#">网站地图</a></div>
<div id="sub_5" class="undis" ></div>
<div id="sub_6" class="undis" ></div>
</div>
</div>
</body>
</html>
这是我拿网络上的一个纯CSS菜单样式修改的竖排样式，你可以拿去参考和再次修改。
希望能帮到你。
下面是效果图，左侧是未展开的，右侧是展开的效果。
你说的是不是浮动float?<style>li {float:leftwidth:150pxtext-align:center}</style>
<ul>
<li>导航一</li><li>导航二</li><li>导航三</li><li>导航4</li>
</ul>
