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:
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With