Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hover-list in CSS Only

Tags:

html

css

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

like image 288
Arrow Avatar asked Aug 01 '12 18:08

Arrow


People also ask

How do you hide a drop down list in CSS?

Answer: Use the CSS :hover pseudo-class If you simply want to show and hide dropdown menu on mouse hover you don't need any JavaScript. You can do this simply using the CSS display property and :hover pseudo-class.

How do you make a dropdown on hover?

Example Explained Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

How do you make text hover in CSS?

There are two ways you can create a hover text for your HTML elements: Adding the global title attribute for your HTML tags. Creating a tooltip CSS effect using :before selector.

Is hover a CSS selector?

The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.


1 Answers

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.

like image 50
David Thomas Avatar answered Oct 04 '22 16:10

David Thomas