i was trying to make a simple css drop down menu. I'm not able to achieve the drop down sub menu when you hover over a link. Below is my html and css rule, thanks.
ul#menu li
{
position:relative;
list-style-type:none;
float: left;
padding:0px;
width: 125px;
height: 25px;
}
ul#sub1 li
{
position:absolute;
left:0;
width:125px;
visibility: hidden;
}
ul#menu li:hover #sub1
{
visibility:visible;
}
<ul id="menu">
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a>
<ul id="sub1">
<li><a href="#">Hyperlink 2.1</a></li>
<li><a href="#">Hyperlink 2.2</a></li>
</ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>
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.
HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
Answer: Use the CSS :hover pseudo-class You can do this simply using the CSS display property and :hover pseudo-class. The following example will show you how to implement a simple dropdown using the CSS.
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
Try this:
ul#sub1 {
position:absolute;
left:0;
width:125px;
visibility: hidden;
}
ul#menu li:hover #sub1 {
visibility:visible;
}
Fiddle
issue is that your your menu ul is visible (always) but the li's inside them are invisible (always) due to the selector of the this rule ul#sub1 li
.
Do remember that visibility:hidden hides the element but still occupies space in DOM, whereas display:none hides the element and takes it out of page element flow
Also you necessarily do not need to use ids in css selectors especially for a menu like this. You can achieve it without that, consider the situation with many level menus, by using ids you will have to write selectors indefinitely. Instead you can try something like this.
ul#menu ul {
padding:0px;
}
ul#menu li {
position:relative;
list-style-type:none;
float: left;
width: 125px;
}
ul#menu li > ul {
display: none;
}
ul#menu li:hover > ul {
display:block;
}
Fiddle
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