How to add vertical sub-menu to horizontal menu using css and html? -

i want add vertical sub-menu horizontal menu. have menu style spotlight. i've tried didn't work. please me.

here code:

<div class="spotlightmenu">       <ul>         <li><%: html.actionlink("home", "index", "home")%>             <ul>                 <li><%: html.actionlink("submenu1", "", "")%></li>                 <li><%: html.actionlink("submenu2", "", "")%></li>                 <li><%: html.actionlink("submenu3", "", "")%></li>             </ul>         </li>         <%--   <li><%: html.actionlink("about", "about", "home")%></li> --%>         <li><%: html.actionlink("profile", "", "")%></li>         <li><%: html.actionlink("register", "index", "register")%></li>         <li><%: html.actionlink("about us", "", "")%></li>         <li><%: html.actionlink("contact us", "", "")%></li>     </ul> </div> 

and here css file:

.spotlightmenu {     width: 100%;     overflow:hidden; }  .spotlightmenu ul {     margin: 0;     padding: 0;     font: bold 14px verdana; /* font style , size */     list-style-type: none;     text-align: left; /* "left", "center", or "right" align menu */     /* background-color: #0033ff; */     background-image: url('menu_style.jpg');     border-radius:40px;  /* making round corners of menu */     /* opacity:0.5; */  }  .spotlightmenu li {     display: inline-block;     position:relative;     padding: 5px;     margin: 0;     margin-right: 5px; /* right margin between menu items */ }   .spotlightmenu li {     display:inline-block;     padding: 5px;     padding-top:10px;     min-width:50px; /* horizontal diameter of spotlight */     height:30px; /* vertical diameter of spotlight */     text-decoration: none;     color: white;     margin: 0 auto;     overflow:hidden;     -moz-transition: 0.5s ease-in-out; /* css3 transition animate properties */     -webkit-transition: 0.3s ease-in-out;     -o-transition: 0.3s ease-in-out;     -moz-transition: 0.3s ease-in-out;     -ms-transition: 0.3s ease-in-out;     transition: 0.3s ease-in-out; }  .spotlightmenu li:hover {     color: white;     background: #99cc66;            /* #669900; /* background color of spotlight */     -webkit-border-radius: 50%; /* large radius create circular borders */     -moz-border-radius: 50%;     border-radius: 50%; }  .spotlightmenu li span {     position:relative;     top:35%; /* move text down appears centered within menu item */ } 

for example can this: html:

<ul id="navbar">   <!-- strange spacing herein prevents ie6 whitespace bug. -->    <div class="spotlightmenu">           <ul>           <li>             <a href="#">helloworld</a>           <ul>            <li><a href="#">subitem1<a></li>           <li><a href="#">subitem2<a></li>           <li><a href="#">subitem3<a></li>            </ul>            </li>            <li><a href="#">section2<a></li>           <li><a href="#">section3<a></li>           <li><a href="#">section4<a></li>           <li><a href="#">section5<a></li>         </ul>    </div> 

css:

    .spotlightmenu ul li ul{         display:none; } .spotlightmenu ul li:hover > ul{         display:block;         margin:0;         padding:0;         position:absolute;         float:none; } .spotlightmenu > ul > li{         margin:10px;         background-color: silver;         border-radius:10px;         display:inline; } 

this simple example want. can see link below:

http://sixrevisions.com/css/30-exceptional-css-navigation-techniques

i suggest jquery , css3 navigation bars cool things.