CSS Dropdown Menu issue

1
votes

I am trying to build a CSS menu with dropdowns,something like:

MENU1 MENU2 MENU3 Item1 Item1 Item1 Item2 Item2 Item2 Item3 Item3 Item4

The Menus bar is a UL with further li and sub ULs for menu dropdowns. I have wrote the CSS and the dropdown occurs on Menu hover but as soon as I try to go through the dropdown list the menu disappears. Obviously because I have set the css hover property on Menu hover. I am trying to use only CSS. Can you direct me what should I do to keep the menu dropdown visible while I go through the dropdown items?

Here is my css:

#menuNav{width:100%; position:relative; height:28px; list-style:none;}
#menuNav li{float:left; position:relative;}  //MENU1, MENU2, MENU3
#menuNav li ul{position:absolute; visibility:hidden; width:100px;} //Each Dropdown is a UL
#menuNav a{display:block;}
#menuNav li:hover ul, #menuNav a:hover ul{visibility:visible;} //Show dropdown on MENU hover
2
cssdrop-down-menu
Never mind. My code works. It was going behind a hidden Div and hence was close automatically when I tried to browse the list. Feel Free to use the above code. - Blueboye

2 Answers

2
votes

CSSPlay has a variety of menu examples.
You might find something you can use as a template.

1
votes

CSS

<style>
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#3A4956;
}
#navMenu ul li a{
text-align:center;
color:black;
text-decoration:none;
font-family:"Comic Sans MS";
height:30px;
width:150px;
display:block;
border-bottom:1px black solid;
}
#navMenu ul li a:hover{
color:white;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
} 
#navMenu ul li:hover ul{
visibility:visible
}
#wrapper1{
border-radius:8px 0 0 0;
border-right:1px black solid

}
#wrapper4{
border-radius:0 8px 0 0;
}
</style>

HTML

<div id="wrapper">
<div id="navMenu">
<ul style="height: 30px; width: 308px">
<li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
<li id="wrapper4"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
</ul>
</div>
</div>