...

View Full Version : Resolved Navigation submenu issues



Varmer
10-24-2010, 04:55 AM
I made a vertical navigation menu and tryed to add submenus with pure css. I can't really explain in words what is going wrong, so I took a screenshot. This is what happens if I mouse-over the menu item with a submenu:

http://img839.imageshack.us/img839/1586/whatxl.png

CSS for the menu:



#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#nav a {
display: block;
width: 100%;
background: black url('imgs/navbg.png');
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-bottom: 3px maroon solid;
padding: 3px 0px 3px 0px;
height: 20px;
font-weight: bold;
text-decoration: none;
}
#nav a:hover {
background: white url('imgs/navhover.png') repeat-x;
color: black;
}

Code for submenu:


.hassubmenu ul {
display: none;
top: -22px;
left: 120px;
position: relative;
float: left;
}
.hassubmenu:hover ul {
display: inline;
}

HTML:



<div id="nav">
<ul>
<li class="hassubmenu"><a href="#">Main 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Main 2</a></li>
<li><a href="#">Main 3</a></li>
<li><a href="#">Main 4</a></li>
</ul>
</div>


if this helps, adding more letters to a submenu does this:

http://img254.imageshack.us/img254/9855/what2.png

Full HTML Pastebin'd (http://varmer.pastebin.com/RkWJMP81)

Full CSS Pastebin'd (http://varmer.pastebin.com/EVdqnzzD)


So basically how do I get the submenus not to affect the original menus? Thanks in advance.

abduraooft
10-24-2010, 01:48 PM
#nav li {
position:relative;
}
.hassubmenu ul{
/*float:left;*/
display:none;
left:8.5em;
position:absolute;
top:0;
}

Varmer
10-24-2010, 04:44 PM
Works perfectly thank you :>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum