how to add vertical submenu to horizontal menu using css and html

mehranmahouti

New Member
i want to add a verstical submenu to my horizontal menu. i have menu style like a spotlight. i've tried everything but it didn't work. please please help me. here is the code:\[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>\[/code\]and here is the css file:\[code\] .spotlightmenu{width: 100%;overflow:hidden;}.spotlightmenu ul{margin: 0;padding: 0;font: bold 14px Verdana; /* font style and 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; /* for making round corners of the 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 a{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: 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: #99CC66; /* #669900; /* background color of spotlight */-webkit-border-radius: 50%; /* large radius to create circular borders */-moz-border-radius: 50%;border-radius: 50%;}.spotlightmenu li a span{position:relative;top:35%; /* move text down so it appears centered within menu item */}\[/code\]please help me. i really need to do it!
 
Top