Clean vertical css menu with submenu

Question

I did my research and was able to replicate what I'm looking for, well, sort of - I just need help with a more specific vertical, clean CSS menu.

I want the pop-up menu of my submenu to appear 10 pixels to the left of the li attribute, like most examples found on the Internet. I'm also looking for the simplest, cleanest CSS menu type - nothing out of the ordinary.

Here is what I have done so far:

 <div id="nav"> <ul class="top-level"> <li><a href="#">This is a long text</a> <ul class="sub-level"> <li><a href="#">Sub Menu Item 1</a></li> <li><a href="#">Sub Menu Item 2</a></li> <li><a href="#">Sub Menu Item 3</a></li> <li><a href="#">Sub Menu Item 3</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact me here</a></li> <li><a href="#">Help</a> <ul class="sub-level"> <li><a href="#">Sub Menu Item 1</a></li> <li><a href="#">Sub Menu Item 2</a></li> <li><a href="#">Sub Menu Item 3</a></li> </ul> </li> </ul> 

my css:

 #nav {border:1px solid cyan;} /* top level menu */ #nav ul.top-level {border:1px solid red;} #nav ul.top-level li {position:relative;} /* sub level menu */ #nav ul.sub-level {border:1px solid yellow;} #nav ul.sub-level {display:none;} /* hide */ /* hover the sub menu*/ #nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;} 

How to do this so that the sublevel menu appears when I hang the HTML anchor a , and not li and 10px to the left of the pressed anchor a ? Thanks.

Answer 1

Try this and I think it will help.

HTML

  <div id="nav"> <ul class="top-level"> <li><a href="#">This is a long text</a> <ul class="sub-level"> <li><a href="#">Sub Menu Item 1</a></li> <li><a href="#">Sub Menu Item 2</a></li> <li><a href="#">Sub Menu Item 3</a></li> <li><a href="#">Sub Menu Item 3</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact me here</a></li> <li><a href="#">Help</a> <ul class="sub-level"> <li><a href="#">Sub Menu Item 1</a></li> <li><a href="#">Sub Menu Item 2</a></li> <li><a href="#">Sub Menu Item 3</a></li> </ul> </li> </ul> </div> 

CSS

 #nav {font-size:0.75em; width:150px;} #nav ul {margin:0px; padding:0px;} #nav li {list-style: none;} ul.top-level {background:#FFFFFF;} ul.top-level li { border: #FF0000 solid; border-width: 1px; } #nav ul.sub-level {border:1px solid yellow;} #nav a { color: #000000; cursor: pointer; display:block; height:25px; line-height: 25px; text-indent: 10px; text-decoration:none; width:100%; } #nav a:hover{ text-decoration:underline; } #nav li:hover { background: #f90; position: relative; } ul.sub-level { display: none; } li:hover .sub-level { background: #999; border: #fff solid; border-width: 1px; display: block; position: absolute; left: 75px; top: 5px; } ul.sub-level li { border: none; float:left; width:150px; } #nav .sub-level { background: #FFFFFF; }