幫助轉換一個正常的導航欄到下拉導航欄

我有一個簡單的導航欄，我想轉換成下拉導航欄，但我不知道我必須做什麼來完成此。我需要一個特定的JavaScript代碼或CSS。感謝幫助轉換一個正常的導航欄到下拉導航欄

/* navigation menu */ 
div#navigation { 
    height:55px; 
    background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left; 
} 
div#innernav { 
    background:transparent url('images/nav-left.png') no-repeat scroll top left; 
    height:55px; 
} 
div#navigation ul { 
    background:transparent url('images/nav-right.png') no-repeat scroll top right; 
    list-style:none; 
    margin:0; 
    padding:0 10px; 
    position:relative; 
    top:0; 
    height:55px; 
    display:block; 
} 
div#navigation ul li { 
    display:block; 
    float:left; 
} 
div#navigation ul li a { 
    display:block; 
    float:left; 
    color:#ffffff; 
    border-bottom:none; 
    height:32px; 
    font-family:"Trebuchet MS", Verdana, Arial; 
    font-weight:bold; 
    font-size:1.2em; 
    padding:14px 20px 9px; 
    border-right:1px solid #060D14; 
    border-left:1px solid #244566; 
} 
div#navigation ul li.navleft a { 
    border-left:none; 
} 
div#navigation ul li.navright a { 
    border-right:none; 
} 
div#navigation ul li a:hover { 
    color:#FC8228; 
} 


<div id="navigation"> 
     <div id="innernav"> 
      <ul> 
       <!-- top navigation --> 
       <!-- add class navleft to first item and navright to last item as shown --> 
       <li class="navleft"><a href="index.html">home</a></li> 
       <li><a href="examples.html">examples</a></li> 
       <li><a href="#">solutions</a></li> 
       <li><a href="#">our service</a></li> 
       <li><a href="#">support</a></li> 
       <li class="navright"><a href="#">contact</a></li> 
      </ul> 
     </div> 
    </div>

來源

2011-03-24 MyHeadHurts

答案將取決於您打算支持哪些瀏覽器。對於大多數瀏覽器，您可以使用純CSS來做到這一點，除了某些類型的IE瀏覽器。 – 2011-03-24 16:39:35

hmmm Internet Explorer是我的主要關注 – MyHeadHurts 2011-03-24 17:05:29

但我想支持firefox，它是一個內部網站，我們都使用ie 8。 – MyHeadHurts 2011-03-24 17:05:50

下面是一個使用了口魚的方法的例子：

http://jsfiddle.net/uCdGc/

這裏是神奇的CSS：

/* Code for dropdown */ 
#navigation ul li ul { 
    position: absolute; 
    left:-999em; 
} 
#navigation ul li ul li { 
    float:none; 
    /* put the rest of your styles here*/ 
} 
#navigation ul li:hover ul, #navigation ul li.sfhover ul { 
    left:auto; 
    margin-top:55px; 
}

更多關於口魚，看看這個網址： http://www.htmldog.com/articles/suckerfish/dropdowns/

我所做的是添加將包含子導航元素的ul元素編輯到「Examples」導航項。當您將鼠標懸停在上方時，CSS將定位子導航，使其顯示在您想要的位置。這應該沒有任何JavaScript的工作，但如果你想支持IE 6，你將需要在示例中包括jQuery javascript library和JavaScript代碼塊。

現在，子導航的格式很簡單，但根據需要添加更多樣式。我已評論你應該在哪裏添加它們。

祝你好運。

來源

2011-03-24 17:38:53 Adam

幫助轉換一個正常的導航欄到下拉導航欄

回答

相關問題