Question

我正在设计Wordpress主题，我唯一遇到的问题是下拉菜单。使用“display”和...属性设置那些“ul”和“li”选择器。即使阅读教程并查看其他网站的CSS（Firebug），我仍然无法创建一个！有没有特定的程序或良好的来源我可以学习它？假设我想设计一个单级下拉菜单。感谢

Answer 1

马赫迪

创建跨浏览器兼容的下拉菜单非常简单，只要您不要过于复杂并且在CSS中有理解元素类型和定位模型。有一些标准的例子可以让你很容易。我会尝试为你提供尽可能简单的答案（因为我的大脑过于复杂，直到我进行了一些研究）。

您的顶级菜单

优良作法是让包含子菜单的所有菜单成为ul元素。这有几个原因。

它自然具有你需要的大多数风格。
无论如何，菜单是一个选项列表，所以它不是一个延伸，使其成为一个列表。
帮助残障人士
允许嵌套。

ul元素的问题是它们有那些讨厌的子弹。此外，li儿童不会自然地一起流动。它们都出现在不同的行上。因此，我们有两个选项来修复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;
}

现在是垂直的！在任何主要浏览器中对此进行测试，您将看到这些是跨浏览器下拉菜单所需的唯一组件。

菜单的最终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>

菜单的最终CSS

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

Answer 2

对我来说，一个好消息是http://lwis.net/free-css-drop-down-menu/ 您可以看到使用的基本结构。

Answer 3

如果您只想创建一个简单的单级菜单。它是由Fuzzical Logic在上面解释的，但您可以使用伪类:hover来显示和隐藏下拉菜单。简单来说就是explained in this article。

希望有所帮助

CSS - 一级下拉菜单

3 个答案: