2011-12-14 113 views
0

我在網站上有以下導航欄。html導航欄中的css下拉菜單

http://i44.tinypic.com/211wk89.jpg

我曾嘗試增添一分導航到HTML如下(你可以在主題和價格標籤> subnav 1見和2)

這裏是導航佈局的HTML

<header> 
    <nav> 
     <div class="container"> 
      <div class="wrapper"> 
       <h1><a href="index"><strong>Virtual-Tutor</strong>Center</a></h1> 
       <ul> 
        <li><a href="index" class="current">Home</a></li> 
        <li><a href="language-tutoring">Subjects &amp; Pricing</a> 
          <ul> 
          <li><a href="subnav 1">subnav 1</a></li> 
          <li><a href="subnav 2">subnav 2</a></li> 
          </ul> 
        </li> 
        <li><a href="how-online-tutoring-works">How it Works</a></li> 
        <li><a href="system-requirements">System Requirements</a></li> 
        <li><a href="contact-us">Contact Us</a></li> 


       </ul> 
      </div> 
     </div> 

    </nav> 
</header> 

但是我無法修復CSS來匹配原始導航設計,顏色和佈局的外觀和感覺。

header h1 {background:url(../images/logo.png) no-repeat 0 0;padding:2px 0 0 38px;font-family:'ColaborateThinRegular';font-size:26px;line-height:1.2em;color:#fff;font-weight:normal;float:left} 
header h1 a {color:#fff;text-decoration:none} 
header h1 strong {font-family:'ColaborateBoldRegular';font-weight:normal} 
header nav {padding:7px 0 10px 0} 
header nav ul {float:right;padding:2px 0 0 0} 
header nav ul li {float:left;padding-left:4px} 
header nav ul li a {position:relative;float:left;font-size:14px;color:#fff;text-decoration:none;font-family:'ColaborateThinRegular';text-transform:uppercase;height:32px;line-height:32px;background-color:#181717;padding:0 36px 0 10px;border-radius:17px;-moz-border-radius:17px;-webkit-border-radius:17px} 
header nav ul li a:hover, header nav ul li a.current {background-image:-moz-linear-gradient(top, #ee3c09, #b90a09);/* FF3.6 */background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #ee3c09),color-stop(1, #b90a09));/* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09');/* IE6,IE7 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09')";/* IE8 */} 
header nav ul li a:after {content:'';display:block;position:absolute;right:12px;top:13px;width:4px;height:7px;background:url(../images/arrow1.gif) no-repeat 0 0} 
header .adv-content {overflow:hidden;background:#f9f9f9;padding:10px 0 8px 0} 
header .breadcrumbs {float:left;padding:3px 0 0 10px} 
header .breadcrumbs li {display:inline;color:#212121;padding-left:5px} 

我已經通過無數次的導航編碼樣品走了,但無法弄清楚如何添加subnav具有相同的外觀和感覺父導航欄。所有的例子都顯示了他們自己的設計從頭開始。有人可以請幫助與CSS?

+0

[CSS下拉菜單](http:///stackoverflow.com/questions/6506571/css-drop-down-menu) – 2011-12-14 19:42:32

+0

喬恩,我需要的是一些CSS的幫助,以獲得與我的父導航匹配的外觀和感覺..所有編碼示例我看到從頭開始工作他們自己的設計.. – ABI 2011-12-15 02:57:30

回答