用css進行導航定位

簡單利用CSS進行導航定位。這是我使用最方便的了。一直沒找著好的方法。

<style>
#menu{
 clear:both;
 width:100%; height:64px;
 background:url(images/menu_bg.jpg) repeat-x;
}
#menu-bg{
 width:755px; margin:auto; height:64px;
 padding-left:124px; padding-right:124px;
 background:url(images/menu_bg.jpg) repeat-x;
}
#menu-parent{
 margin:auto; height:36px; line-height:36px;
 background:url(images/menu-parent-bg.gif) no-repeat left center;
}
#menu-parent a{
 display:inline; width:93px; height:36px; line-height:35px;
 float:left; text-align:center; padding-left:1px;
 color:#FFFFFF;
}
#menu-parent a:hover,#menu-parent a:active,.menuA{
 background:url(images/menu-bg-A.gif) no-repeat right;
 color:#CCCCCC !important;
}
</style>

 

<div id="menu">
  <div id="menu-bg">
  <div id="menu-parent">
  <a href="#" class="menu-this" id="par1">網站首頁</a>
  <a href="#" id="par2">關於我們</a>
  <a href="#" id="par3">新聞中心</a>
  <a href="#" id="par4">產品體系</a>
  <a href="#" id="par5">解決方案</a>
  <a href="#" id="par6">典型案例</a>
  <a href="#" id="par7">客戶服務</a>
  <a href="#" id="par8">聯絡我們</a>  </div> 
 
  </div>
</div>

/Files/sojay/CSS.rar