CSS下拉菜单

Question

在普通的html网站上有没有好的css下拉菜单解决方案？ 或者使用javascript更好？

Answer 1

这是一个仅限css的解决方案。因为我不知道你想要在菜单中呈现什么，我只能为你提供一个基本的解决方案，你必须适应你的需求，不过这里是html和css：

HTML：

<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third, with a dropdown
        <ul>
            <li>First sub-item</li>
            <li>Second sub-item</li>
            <li>Third, with a fly-out
                <ul>
                    <li>Flyout one</li>
                    <li>Flyout two</li>
                    <li>Flyout three</li>
                </ul>
            </li>
            <li>Fourth sub-item</li>
        </ul>
    </li>
    <li>Fourth list item</li>
</ul>

的CSS：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    width: 10em;
    height: 2em;
    line-height: 2em;
    position: relative;
    border-bottom: 2px solid #ccc;
}

ul li:hover {
    background-color: #ffa;
}

ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
}

ul li:hover ul {
    display: block;
}

ul li ul li {
    display: list-item;
    position: relative;
}

ul li ul li ul {
    display: none;
    position: absolute;
    top: 0;
    left: 10em;
}

ul li ul li ul li {
    display: none;
}

ul li ul li:hover ul {
    display: block;
}

ul li ul li:hover ul li {
    display: list-item;
}

JS Fiddle demo

Answer 2

This是我目前最喜欢的CSS下拉菜单解决方案。该网站还提供了很多很棒的主题。我建议您阅读HTML和CSS，了解一切是如何运作的，这样您就可以构建这个解决方案。

Answer 3

DynamicDrive有很多免费的CSS菜单。