<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>
程序输入如下：
<div id="menu">
<br/>
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
#menu{
overflow:hidden
height:20px}
#menu:hover {
height:100px}
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover{
background-color:yellow}
对于HTML 部分：
可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button>元素。使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 <div>元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
对于CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
比如我现在要滑动到此p标签区域，可先给p标签加上一个id，导航处的a标签利用它的href属性，如<a href="#scroll"></a>
<p id="scroll"></p>
