用css创建子菜单 [英] create submenu with css
问题描述
谁能帮帮我.我有这个 html 代码,我想用 css 设计我的子菜单,但我是新手,我真的需要帮助
我想要我的子菜单的下拉列表.我的菜单目前是水平的
让您开始...
.nav li ul { display: none;}.nav li:hover ul { display: block;}
您的 HTML 也需要稍作修改...您需要将子菜单
嵌套在父 中.如下图:
如何<ul><li><a href="#">子项目 1.1</a></li><li><a href="#">子项目 1.2</a></li>
这是一个演示此工作的 jsfiddle,显然它不是水平的,因为我缺少您已经制作的样式,但是当您将鼠标悬停在How To"上时,该功能仍然有效:
Can someone help me. I have this html code and i want to design my submenus with css, but i am new in this and i really need a help
<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>
I want to have dropdown list for my submenus.My menu is horizontal at the moment
To get you started...
.nav li ul { display: none; }
.nav li:hover ul { display: block;}
Your HTML needs a minor edit also... You need to nest the sub-menu <ul>
inside the parent <li>
. Like below:
<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>
Here is a jsfiddle demonstrating this working, obviously it is not horizontal as I lack the styles you already made, the functionality still works however when you hover the mouse over "How To":
这篇关于用css创建子菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!