1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏，float: left使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
<!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>
有两种思路。解决第一种：通过判断当前的页面的分类ID和每个菜单的ID进行对比，哪个菜单的ID等于当前页面的分类ID。。那么给其添加一个CLASS让其样式发生变化。。这种方法需要PHP ASP .NET等WEB服务器脚本辅助实现。
第二种：就是通过纯CSS实现。。简单点说就是给每个菜单进点击进入的页面的body元素各添加一个class.然后通过CSS层叠样式表定义其页面击后的效果。示例如下
如果是产品介绍的页面那么body元素添加一个样式<body class=“product”>
介绍页面呢给body元素再添加另一个样式<body class='about'>
其他页面以此类推
然后在样式表中这样定义点击后的页面的样式
/*定义菜单的初始样式*/
.menu li a{display:blockwidth:80pxheight:30pxbackground:greenfloat:left}
/*定义当前页面对应的菜单样式*/
body.product .menu li a,body.about .menu li a{display:blockwidth:100%height:100%background:red}
这样你进入产品介绍 和 公司介绍页面之后对应的CSS生效对应的菜单背景颜色会变红。。点进去变红。其他菜单还是初始样式。。
其实第二种比较麻烦。因为分别定义body加class那部分。。或者你用服务器脚本动态生成lclass 。也行。。但相比第一种还是麻烦了许多。
如果对您有帮助。还望采纳。谢谢。
