Sub Menus

[webphotogeek]

Can somebody help me with setting up submenus. I have a CSS horizontal menu working fine, but I can't seem to get the sub menus to work. Here is the code:

HTML

<div class="spotlightmenu">
<ul>
<li><a href="http://turnkeyelite.com/index.php">Home</a></li>
<li><a href="http://turnkeyelite.com/SEO-training/seo.php">SEO Training</a>
<ul>
<li><a href="http://turnkeyelite.com/SEO-training/SEO-Training-Videos.php">SEO Video Training</a>
</ul>
<li><a href="http://turnkeyelite.com/Services/Services.php">Services</a></li>
<li><a href="http://turnkeyelite.com/Pricing/Pricing.php">Pricing</a></li>
</ul>

CSS

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14pt "Comic Sans ms"; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}

.spotlightmenu li a{
font: bold 14pt 'Comic Sans ms';
color:#0000FF;
display:inline-block;
padding: 5px;
min-width:30px; /* horizontal diameter of spotlight */
height:30px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{

color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 30%; /* large radius to create circular borders */
-moz-border-radius: 30%;
border-radius: 30%;
}

.spotlightmenu li a span{
position:relative;
top:35.spotlightmenu%; /* move text down so it appears centered within menu item */
}

/* Sub Menus */
.spotlightmenu li ul {
display: none; }
.spotlightmenu li ul li a:hover {
position: absolute;
visibility:visible;
display: inline;
top: 15;
left: 150;
width: 100%;
margin: 0;
padding: 0;
color: #000;
}

/* Sub Menus
.spotlightmenu ul li ul
position:absolute;
visibility:hidden;
}
.spotlightmenu ul li:hover ul {
visibility:visible;
}

/*.spotlightmenu ul li ul li a:hover
{
background-color:#FF0000;
text-align:left;
font-size:10pt;
top:75px;
left:15px;
line-height:18px;
}
*/

[ajfmrf]

Please post a link to the problem page so help can be given.Sometimes there is other parts that can effect the rest of the page such as what you posted.

[webphotogeek]

Sure. http://turnkeyelite.com

Thanks