金坛外文网总结（三）

导航目录：

<div class="clear"></div>

<div class="nav" id="nav">

<ul>

<li><a id="n0" href="index.aspx">Home</a></li>
<li><a id="n1" href="about_us.aspx?ParentCateId=92">About us</a></li>
<li><a id="n2" href="main_industries.aspx?ParentCateId=93">Main Industries</a></li>
<li><a id="n3" href="gov_support.aspx?ParentCateId=94">Gov support</a></li>
<li><a id="n4" href="en_advantage.aspx?ParentCateId=95">Advantages</a></li>
<li><a id="n5" href="en_investment.aspx?CurCateId=108">Investment</a></li>
<li><a id="n6" href="living_environmment.aspx?ParentCateId=97">Living environment</a></li>
<li><a id="n7" href="contant_us.aspx?CurCateId=101">Contact Us</a></li>
</ul>
</div>

 

css:

.nav {
background: url(../img/nav_bg.png) repeat-x;
height: 34px;
width: 990px;
float: left;
}

.nav ul {
margin-top: 0px;
height: 34px;
}

.nav ul li {
display: list-item;
list-style-type: none;
/*background: url('../images/nav-item-bg.png') no-repeat right;*/
float: left;
height: 34px;
line-height: 36px;
text-align: center;
}

.nav .nav-item-last {
background-image: none;
}

.nav ul li a{
color: #fff;
font-size: 14px;
padding-left: 20px;
padding-right: 20px;
float: left;
line-height: 34px;
text-align: center;
}

.nav a:hover{
background: white repeat-x center bottom;
color: #1080c7;
text-decoration: none;
}
.nav a.active{
background: #E8E8EC repeat-x center bottom;
color: #1080c7;
text-decoration: none;
}

转载于:https://www.cnblogs.com/sunzgod/p/4179797.html