我在设计Wordpress主题,我唯一的问题就是下拉菜单。 使用“显示”和...属性设置那些“ul”和“li”选择器的样式。 即使阅读教程并查看其他网站的CSS(Firebug),我仍然无法创建一个! 有什么特别的程序或者我可以学习的好源? 假设我想要设计一个级别的下拉菜单。 谢谢CSS - 单层下拉菜单
回答
我的一个很好的来源是http://lwis.net/free-css-drop-down-menu/ 你可以看到使用的基本结构。
马赫迪,
创建一个跨浏览器兼容的下拉菜单很简单,只要你不要过分复杂化,并有一个体面的理解元素类型和CSS的定位模型。有一些标准的例子可以让你很容易。我会尽量为你提供一个尽可能简单的答案让你理解(因为我的大脑过于复杂,直到我做了一些小小的研究)。
顶层菜单
这是很好的做法,所有菜单包括子菜单是ul
元素。这有几个原因。
- 它自然有你需要的大部分风格。
- 无论如何,菜单是一个选项列表,所以它不会让它成为一个列表。
- 它可以帮助残疾人士
- 它允许嵌套。
与ul
元素的问题是他们有那些讨厌的子弹。此外,儿童不会自然流动在一起。它们全部出现在单独的行中。所以,我们有两个选项来修复li
。我们可以float
他们,但这可能会相当尴尬。我不推荐它。或者我们可以改变它的类型。好吧,我们在其中包含另一个块,所以inline-block
对此非常完美。
<!-- the HTML for the menu -->
<ul class="menu">
<li class="submenu"><a href="url">link</a></li>
<li class="submenu"><a href="url">link</a></li>
<li class="submenu"><a href="url">link</a></li>
</ul>
/* The CSS for the menu */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
**你的子菜单**
现在,嵌套ul
元素必须是一个列表项。如果您将自己的下拉框ul
置于li
本身,浏览器将始终正确解释它。现在,我们不必宣布任何有趣的事情。仅举新ul
同原来的菜单,就像这样:
<!-- Your new HTML -->
<ul class="menu">
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
</ul>
/* Your new CSS. Notice nothing has changed. */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
下一步。让下拉菜单出现。
现在,我们有了我们的跨浏览器结构,我们只需要调整几件事情。我们需要先让菜单出现并消失。因为我们只希望这发生在一个子菜单中,我们得到了更具体的:
/* Add this to your CSS. */
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
现在,如果你看看,你的菜单出现,适当地消失。没有造型,只是为你列出。在所有浏览器中以相同的方式工作...哦,等等! IE越来越大。那么,这是一个简单的问题。你看,IE解释填充不同于其他填充。让它成为一个非问题:
/* Add this to your CSS. */
menu * {
padding:0; /* Width problem solved. */
}
现在,另一个问题......你的子菜单是水平的。原因是因为我们告诉它应该是我们原来的。
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
我们可以解决这个问题,我更具体。
/* Add this to your CSS. */
li.submenu ul.menu li {
display:block;
}
现在是垂直的!在任何主流浏览器中进行测试,您将看到这些是跨浏览器下拉菜单所必需的唯一组件。
菜单
<ul class="menu">
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
</ul>
最后的CSS最终的HTML菜单
menu * {
padding:0; /* Width problem solved. */
}
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
li.submenu ul.menu li {
display:block;
}
此解决方案不要求滑稽定位或宽度声明。
希望这会有所帮助!
FuzzicalLogic
+10可以得到很好的答案,+另外10个可以让它成为__的一个很好的答案。 – Bojangles
如果您只想创建一个简单的单级菜单。这是上面通过Fuzzical Logic解释的,但您可以使用伪类:hover
来显示和隐藏下拉菜单。这是简单的explained in this article。
希望它有帮助
- 1. CSS - 下拉菜单
- 2. CSS下拉菜单
- 3. CSS下拉菜单
- 4. CSS下拉菜单
- 5. css下拉菜单汉堡菜单
- 6. CSS下拉菜单[帮助]
- 7. CSS下拉菜单截止
- 8. CSS中的下拉菜单
- 9. CSS下拉菜单级别
- 10. 修复CSS下拉菜单
- 11. 下拉菜单w/css
- 12. 下拉菜单只有CSS
- 13. 下拉菜单CSS承包
- 14. CSS列表下拉菜单
- 15. 下拉菜单的css
- 16. CSS下拉菜单样式
- 17. CSS下拉菜单编辑
- 18. CSS平滑下拉菜单
- 19. CSS下拉菜单问题
- 20. CSS下拉菜单问题
- 21. CSS下拉菜单消失
- 22. HTML + CSS下拉菜单
- 23. 下拉菜单CSS查询
- 24. html + css双下拉菜单
- 25. css定位下拉菜单
- 26. CSS下拉菜单问题
- 27. CSS下拉菜单发出
- 28. CSS下拉菜单消失
- 29. CSS下拉菜单怪怪
- 30. CSS下拉菜单问题
谢谢,但刚刚头痛! – Mehdi
在CSS中创建一个跨浏览器兼容的“简单”菜单并不容易:) – hellectronic