CSS下拉菜单

Question

有没有好的CSS下拉菜单解决方案在常规html网站中使用？或者使用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小提琴演示.