Navigation drop down menu

[cliftonbazaar]

I am trying to create a vertical navigation drop down menu where, if you hover the mouse over the parent, a drop down sub-menu appears on the right.

With the code I have the sub menu comes up OVER the parent menu at the top left of the navigation DIV; I want the sub menu to appear on the right of the parent menu and also the top sub menu to appear next to the parent.

 

HTML code is

<li><a href='games.php'>Games</a>
<ul>
<li><a href='games/crivia.php'>Crivia</a></li>
<li><a href='games/sleuth.php'>Super Sleuth</a></li>
</ul>
</li>

 

while my full CSS looks like

#navigation {
width: 12em;
border-right: 1px solid #000;
padding: 1em 0 1em 0;
margin-top: 1em;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
  Verdana, Lucida, Geneva, Helvetica, 
  Arial, sans-serif;
background-color: black;
color: #333;
cursor: pointer;
	display:block;
position:relative;
}

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navigation li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#navigation li a,active {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid black;
border-right: 10px solid red;
background-color: maroon;
color: #fff;
text-decoration: none;
width: 100%;
}

#navigation li a,active {
width: auto;
}

#navigation li a:hover {
border-left: 10px solid black;
border-right: 10px solid maroon;
background-color: grey;
color: #fff;
position: relative;
}

#navigation li active {
border-left: 10px solid black;
border-right: 10px solid red;
background-color: red;
color: black;
}

#navigation ul ul{
position:absolute;
display:none;
}

#navigation ul li:hover ul{
position:absaloute;
display:block;
top:0;
}

[Mahngiel]

Fiddle: http://jsfiddle.net/y6pww/

 

Tips: You won't need absolute positioning on a vertical list, but you do need to ensure your parent UL is relatively positioned. 

[cliftonbazaar]

Thanks for the link, now have it in my favorites