用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菜单是水平的此刻
为了让你开始...
.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证明这个工作,这显然不是水平的,因为我没有你已经取得的风格,当你将鼠标悬停功能仍然有效,但是“如何”:
我已经尝试过,但没有发生。 – 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
有很多教程在那里,例如: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