急!!!求高手帮忙,导航栏点进页面导航栏不变色,始终在一个页面,改成点哪个哪个变色
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.<html xmlns="http://www.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公司</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body id="lineup">
<div id="nav">
<ul id="nav_box" class="dropdown dropdown-horizontal">
<li id="nav01"><a href="#" class="hidde">首页</a></li>
<li id="nav02"><a href="#" class="dir hidde">新闻・活动</a> </li>
<li id="nav03"><span class="dir"><a href="#" class="dir hidde">活动</a></span> </li>
<li id="nav04"><a href="#" class="dir hidde">精品</a></li>
<li id="nav06"><a href="#" class="hidde">服务</a></li>
<li id="nav08"><a href="#" class="hidde">关于我们</a></li>
</ul>
</div>
</body>
</html>
CSS如下:
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
}
ul.dropdown li {
float: left;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 2px;
left: 100%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
/*------------------------------------------------------------------------------------------------------/
* @section Base Style Extension
*/
ul.dropdown a, ul.dropdown span {
display: block;
}
ul.dropdown ul a {
width: 135px;
}
ul.dropdown ul a.dir {
width: 135px;
}
ul.dropdown ul li:hover > *.dir {
background: url(../images/css/bg_nav_ulthr_h.jpg) 95px center no-repeat;
}
ul.dropdown a:link, ul.dropdown a:visited {
text-decoration: none;
}
/* NON-FIRST LEVEL */
ul.dropdown ul, ul.dropdown ul ul {
width: 135px;
}
ul.dropdown ul ul {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
border-top: none;
border-left: none;
font-weight: normal;
}
/* ---- Layer 1 第一级菜单 ---- */
#nav ul li {
background:url(../images/css/nav_line_03.jpg) right top no-repeat;
height:30px;
float:left;
display:block;
}
#nav ul li#nav08 {
background:none;
}
#nav ul li a {
display:block;
line-height:30px;
width:137px;
height:30px;
text-align:center;
position:relative;
z-index:1000;
}
#nav ul li a.hidde {
text-indent:-9999px;
}
#nav ul li#nav01 a {
width:138px;
}
#nav #nav_box ul li ul a {
text-indent:inherit;
}
#nav ul li a:hover {
color:#FE0000;
}
#nav01 a:link, #nav01 a:visited {
background:url(../images/css/nav_01.jpg) left top no-repeat;
}
#nav01 a:hover, body#homepage #nav01 a {
background:url(../images/css/nav_01.jpg) left bottom no-repeat;
}
#nav02 a:link, #nav02 a:visited {
background:url(../images/css/nav_02.jpg) left top no-repeat;
}
#nav02 a:hover, body#news #nav02 a {
background:url(../images/css/nav_02.jpg) left bottom no-repeat;
}
#nav03 a:link, #nav03 a:visited {
background-image: url(../images/css/nav_03.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#nav03 a:hover, body#lineup #nav03 a {
background-image: url(../images/css/nav_03.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
#nav04 a:link, #nav04 a:visited {
background:url(../images/css/nav_04.jpg) left top no-repeat;
}
#nav04 a:hover, body#env-tec #nav04 a {
background:url(../images/css/nav_04.jpg) left bottom no-repeat;
}
#nav05 a:link, #nav05 a:visited {
background:url(../images/css/nav_05.jpg) left top no-repeat;
}
#nav05 a:hover, body#dealer #nav05 a {
background:url(../images/css/nav_05.jpg) left bottom no-repeat;
}
#nav06 a:link, #nav06 a:visited {
background:url(../images/css/nav_06.jpg) left top no-repeat;
}
#nav06 a:hover, body#service #nav06 a {
background:url(../images/css/nav_06.jpg) left bottom no-repeat;
}
#nav07 a:link, #nav07 a:visited {
background:url(../images/css/nav_07.jpg) left top no-repeat;
}
#nav07 a:hover, body#recruit #nav07 a {
background:url(../images/css/nav_07.jpg) left bottom no-repeat;
}
#nav08 a:link, #nav08 a:visited {
background:url(../images/css/nav_08.jpg) left top no-repeat;
}
#nav08 a:hover, body#mitsubishi #nav08 a {
background:url(../images/css/nav_08.jpg) left bottom no-repeat;
}
/* ---- Layer 2 第二级菜单 ---- */
#nav ul li#nav08 ul {
width:137px;
}
#nav ul li ul li {
border-bottom:1px solid #E6E6E6;
border-right:1px solid #E6E6E6;
border-left:1px solid #E6E6E6;
background:#FFF;
height:auto;
}
#nav ul li ul li a {
height:auto;
line-height:1.2;
padding:8px 0;
}
body#news #nav ul li ul li a, body#lineup #nav ul li ul li a, body#env-tec #nav ul li ul li a, body#dealer #nav ul li ul li a, body#service #nav ul li ul li a, body#recruit #nav ul li ul li a, #nav ul li ul li a:link, #nav ul li ul li a:visited, #nav ul li ul li a:hover, body#mitsubishi #nav ul li ul li a {
background:none;
width:133px;
}
#nav ul li#nav01 ul li a, #nav ul linav01 ul li a:link, #nav ul linav01 ul li a:visited, #nav ul li ul linav01 a:hover {
width:134px;
}
#nav #nav_box li#nav08 ul li a, #nav ul linav08 ul li a:link, #nav ul linav08 ul li a:visited, #nav ul li ul linav08 a:hover, body#mitsubishi #nav ul li#nav08 ul li a {
width:135px;
}
#nav #nav_box li ul .second, #nav #nav_box .children .headerbar {
height:30px;
line-height:30px;
text-align:center;
font-weight:normal;
font-size:12px;
width:133px;
color:#FFF;
}
#nav #nav_box li ul .second a, #nav #nav_box li #menu_b li a, #nav #nav_box li #menu_c li a, #nav #nav_box li #menu_d li a, #nav #nav_box li #menu_e li a, #nav #nav_box li #menu_f li a {
background:url(../images/css/bg3.jpg) repeat 0 0;
}
#nav #nav_box li ul .second a span {
background: url(../images/css/arrow_01.gif) 120px center no-repeat;
}
#nav #nav_box li#nav08 ul .second a span {
background: url(../images/css/arrow_02.gif) 10px center no-repeat;
}
#nav #nav_box li#nav08 ul .second {
width:135px;
}
#nav #nav_box h3.headerbar, #nav #nav_box .submenu {
border-right:1px solid #E6E6E6;
border-left:1px solid #E6E6E6;
}
#nav #nav_box h3.headerbar a {
background:none;
font-weight:normal;
font-size:12px;
width:133px;
color:#FFF;
}
/* ---- Layer 3 第三级菜单 ---- */
#nav ul li ul li ul {
z-index:500;
}
#nav #nav_bigbox #nav_box li ul li ul li a:link, #nav #nav_bigbox #nav_box li ul li ul li a:visited {
color:#666;
}
#nav #nav_bigbox #nav_box li ul li ul li a:hover {
color:#FE0000;
}
#nav ul li ul li ul li.first a {
border-top:1px solid #E6E6E6;
}
#nav ul li#nav08 ul li ul {
margin-left:-270px;
}