在谷歌主頁，如果您單擊更多按鈕，將打開一個菜單下面只是按鈕，像這樣：如何創建一個下拉菜單，如谷歌的「更多」按鈕？
我怎樣才能在導航欄上做類似的事情有一個選項卡我的網站使用css/javascript/jquery？
編輯：更具體，我想知道如何完成這個CSS的部分，即：
如何使一個向上/向下箭頭的標籤上顯示圖形時的下拉是切換。 （即當切換時，顯示向下箭頭，不顯示時向上箭頭）。 （而不是隻是把<img>我寧願使用背景圖像來切換箭頭）
如何讓新列表在標籤下方彈出並與其對齊。
這是一個可以完成的方法的例子。當然，你可以嘗試diff方法和東西，但這是一個基本的工作解決方案。
單擊鏈接切換的下拉元素非常好。
<div id="topBar">
<a href="#" id="more">More
<span id="arrow">
<span id="arrdown">▼</span>
<span id="arrup">▲</span>
</span>
</a>
<div class="dropdown">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</div>
然後你把它用JS點擊切換。
$('#more').click(function() {
$(this).toggleClass('active');
$(this).next('.dropdown').toggle();
return false;
});
$('.dropdown a').click(function() {
return false;
});
CSS：
body { background: #fee; font-family: calibri; }
#topBar { text-align: right; background: black; color: white; padding: 5px; }
#topBar a { color: white; text-decoration: none; padding: 5px 7px; }
#topBar a:hover { background: #ddd; color: black; }
#topBar a.active { background: white; color: black; }
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; }
.dropdown a:hover { background: #ccc; }
#arrup { display: none; }
#arrow { font-size: 0.6em; }
下面是使用CSS一個活生生的例子：通過寫用來創建什麼你已經預想到適當的代碼*（http://jsfiddle.net/ZUPBj/
-1一個非現場鏈接不是一個答案。充其量，它應該作爲評論發佈。 – 2012-06-16 19:38:04
拿了點。編輯 – casraf
通常情況下，通過StackOverflow，您可以在編輯發生時撤消倒票。似乎有一個錯誤，如果編輯發生在前5分鐘內，它不能被撤銷。否則，我會刪除DV。 – 2012-06-16 19:44:19
有許多不同的方法來此，最簡單的一個：
創建一個隱藏的div得到的是點擊菜單項時的切換。
<div class="menu"></div>
<div class="dropDown"></div> <!-- Hidden by default -->
<script>
$(".menu").on("click",function(){
$(".dropDown").toggle();
});
</script>
感謝您的回答，我正在尋找更多關於如何做到這一點的CSS部分，我編輯了這個問題來澄清 –
一些谷歌搜索會在網上找到你很多教程。我搜索了「在html中構建下拉菜單」。下面的這些鏈接是我發現的一些更好的教程。
http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/
基本上他們在做什麼，當用戶將鼠標懸停在菜單的第一級顯示一個隱藏的股利。
你做吧或者其他人在這種情況下設想的）*。你有一個*特定的*編程問題？ – 2012-06-16 19:19:37
是的，他想知道如何創建一個下拉菜單。什麼不是特定的？ – casraf
@OhMrBigshot：完全沒有關於它的具體內容。它比有人問我「如何創建網站」更具體一些。換句話說，沒有具體的問題需要解決。這是一個非常廣泛的描述，有效地陳述......「這是我想要的，我該怎麼做」。一個具體的問題是......「這就是我正在做的，這就是我所做的，但我在這個問題上停滯不前。 – 2012-06-16 19:34:57