用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创建子菜单

回答

相关问题