<nav>
<div>
<a href="#">点</a>
<a href="#">滴</a>
<a href="#">一</a>
<a href="#">生</a>
</div>
</nav>
<body>
<style>
body {
margin: 0/*一定的初始化是必要的*/
}
nav {
position: fixed/*因为是一个全页面的竖排导航，所以必须设置为固定定位*/
/*同时因为固定定位是把标签从文档中直接拿出来，所以布局其他元素时要用margin留出外边距，
必要时可以设置导航栏为固定宽度保证不会出现白边*/
background-color: #2f2f2f
height: 100%/*让导航栏与页面同高*/
top: 0left: 0/*设置了固定定位后这两个属性才起作用*/
}
nav a { /*设置每个a标记的display属性为block，这样方便控制每个a标记的样式*/
font-weight: bold
font-size: 18px
color: #ffffff
display: block
padding: 15px
text-decoration: none
}
nav div a:first-child { /*通过伪类来控制活动页面的a标记的样式，作为静态页面每个页面都要写不同的css控制样式，
所以使用不方便的话可以使用class来控制样式*/
box-shadow: -1px 0.5px 4px 1px #777 inset
background-color: #e58c7c
}
nav div a:hover {
background-color: #e58c7c
}
nav div a:active {
box-shadow: -1px 0.5px 4px 1px #777 inset
background-color: #e58c7c
}
</style>
<!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>
<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>
