CSS Dropdown menu [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 7 years ago.

Improve this question

Is there any good css dropdown menu solution to use in regul开发者_如何学编程ar html website? Or using javascript is better?

---

Here's one, css-only, solution. Because I've got no idea as to what you want to present in your menu I can only offer you a basic solution that you'll have to adapt to your needs, however here's the html and 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.

---

This is my current favourite CSS dropdown menu solution. The site also presents a lot of great themes. I would recommend reading through the HTML and CSS to understand how everything works so you can build on this solution.

---

DynamicDrive has a lot of free css menus.