CODEWITHSUNDEEP
htmlcss
Arrow
Arrow

Reputation: 2904

Hover-list in CSS Only

I'm having some trouble with CSS rollover menus.

I've seen it a lot, and there are tutorials, but there is so much unnecessary code, and I find it hard to distinguish between which is the needed code, and which is just other CSS.

I'd like to have a hover menu on CSS only because the website I'm working on has a lot of users that intentionally have scripting disabled (JavaScript).

I don't understand, in CSS, how one can make a "sub menu" appear beneath its parent List item when the user hovers over the parent list item. Can someone please help me understand how this works in CSS?

Below is an image of what I am referring to:

enter image description here

Upvotes: 6

Views: 11652

Answers (1)

David Thomas
David Thomas

Reputation: 253308

The following will work, in its basic form, but style for your own tastes (position, borders, colours, etc):

<ul>
    <li>Simple List item
        <ul>
            <li>sub menu item 1</li>
            <li>sub menu item 2</li>
            <li>sub menu item 3</li>
       </ul>
    </li>
</ul>

With the CSS:

ul li {
    position: relative;
}

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

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

JS Fiddle demo.

Upvotes: 12

Related Questions