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