Second Level Drop Down Menu Issue

[NTxNerd]

I couldn't get my second level drop down menu to be hidden until hover. I finally acheived that by adding to my css



#navbar ul li ul ul {
position:left;
left:-999em;
}

My CSS is quoted below.

Now I'm not sure how to make it appear on hover.

Also, how do I get the drop down to be directly under the nav link?

Here is the link (http://www.northtexasnerd.com/gehrig/gpr.html). Any suggestions?


@charset "UTF-8";

{
margin: 0px;
padding: 0px;
}
.bgimage {
background-image: url("images/blackstripebg.jpg");
}
.bgrepeaty {
background-image: url("images/blackstripebg.jpg");
background-repeat: repeat-y;
}
.bgrepeatx {
background-image: url("images/blackstripebg.jpg");
background-repeat: repeat-x;
}
#content {
background-color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
}
#header {
background-color: #FFFFFF;
padding-top: 0px;
}
#navbar {
background-color: #000000;
color: #34C601;
font-family: Arial, Helvetica, sans-serif;
float:left;
width:100%;
height:auto;
margin-top: 2px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
padding: 0px;
font-size: medium;
}
#navbar ul {
list-style-type: none;
}
#navbar ul li {
float: left;
position: relative;
}
#navbar ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:25px;
display:block;
text-decoration:none;
color:#30B401;
}

#navbar ul li:hover ul {
display: block;
position: absolute;
}
#navbar ul li:hover ul li a {
display:block;
background:#000000;
color:#30B401;
width: 160px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#navbar ul li:hover ul li a:hover {
background:#30B401;
color:#000000;
}
#navbar ul li ul {
position:left;
display:none;
}
#navbar ul li ul {
position:left;
display:none;
}
#navbar ul li ul ul {
position:left;
left:-999em;
}
#container {
width: 900px;
background-color: #FFFFFF;
margin-top: 20px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
border: 4px double #000000;
}

a img { border:none; }

[Wickham]

Quite honestly, fiddling with the code of drop down menus is a hopeless task; it's much easier to get the nearest style of cssplay menu to what you want and edit it.
http://www.cssplay.co.uk/menus/