CSS Dropdown Menu issue

Question

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

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
– Blueboye, Commented Apr 25, 2012 at 20:11

Honest Abe · Accepted Answer · 2012-09-04 06:03:13Z

2

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

edited Sep 4, 2012 at 6:03

Honest Abe

8,7995 gold badges53 silver badges66 bronze badges

answered Apr 25, 2012 at 19:24

Sven Bieder

5,6912 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Faust Over a year ago

Yeah -- no need to reinvent this wheel.

Blueboye Over a year ago

Great. But, what can I add to my existing CSS to make it work? I am already there 90%. It's just that one thing that is not working.

Sven Bieder Over a year ago

when you read some of the tuts on the site you will understand what to do and why instead of just getting a solution and having the same problem later on again, because you don't know the backgrounds.

Idrizi.A · Accepted Answer · 2012-04-25 19:51:32Z

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>

Collectives™ on Stack Overflow

CSS Dropdown Menu issue

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related