用css創建子菜單

有人可以幫助我。我有這樣的HTML代碼，我想我的設計使用CSS的子菜單，但我在這是新，我真的需要幫助用css創建子菜單

<div class="nav-collapse collapse"> 
      <ul id="nav-list" class="nav pull-right"> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#updates">Updates</a></li> 
       <li><a href="#screenshots">Screenshots</a></li> 
       <li><a href="#howto">How to</a></li> 
        <ul> 
        <li><a href="#">Sub Item 1.1</a></li> 
        <li><a href="#">Sub Item 1.2</a></li> 
        </ul> 
       <li><a href="#permissions">Permissions</a></li> 
       <li><a href="#download">Download</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div>

我想有下拉列表我submenus.My菜單是水平的此刻

來源

2013-03-14 user2171512

有很多教程在那裏，例如：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu – 2013-03-14 20:18:58

請發表你的CSS。 – Michael 2013-03-14 20:19:00

這是一個非常有據可查的文章，圍繞網絡...您可以嘗試一些工具（http://cssmenumaker.com/），教程，（http://www.noupe.com/css/100-great-css -menu-tutorials.html）等 – 2013-03-14 20:20:07

爲了讓你開始...

.nav li ul { display: none; } 

.nav li:hover ul { display: block;}

你的HTML需要一個小編輯也......你需要嵌套父<li>內的子菜單<ul>。如下圖所示：

<li><a href="#howto">How to</a> 
    <ul> 
     <li><a href="#">Sub Item 1.1</a></li> 
     <li><a href="#">Sub Item 1.2</a></li> 
    </ul> 
</li>

這裏是一個的jsfiddle證明這個工作，這顯然不是水平的，因爲我沒有你已經取得的風格，當你將鼠標懸停功能仍然有效，但是「如何」：

http://jsfiddle.net/Zuvdf/

來源

2013-03-14 20:20:52 Michael

我已經嘗試過，但沒有發生。 – user2171512 2013-03-14 20:37:34

我很抱歉，通過錯誤地讀取您的代碼導致錯誤。（這是一個漫長的一天）。您的HTML也不太正確，請參閱上面的編輯以獲取詳細信息。 – Michael 2013-03-14 20:41:13

Tnx關於上面的更正，但是當我在我的CSS中進行更改時，我的標題更改了它的大小。如何使該子菜單看起來像框中帶有邊框的真正下拉子菜單，並且標題保持正常。我將通過我的CSS代碼在後 – user2171512 2013-03-14 21:16:27

用css創建子菜單

回答

相關問題