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

Question

I want to add a vertical sub-menu to my horizontal menu. I have menu style like a spotlight. I've tried everything but it didn't work. Please help me.

Here is the 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 is the css file:

.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 */
}

Answer 1

For example you can do something like this: HTml:

<ul id="navbar">
  <!-- The strange spacing herein prevents an 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 is a simple example that will do what you want. Also you can see the link below:

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

I suggest that you look into jquery and css3 navigation bars they do really cool things.

Answer 2

A good demo of navigation bar you are looking for (#copied, but forgotten the source link).

Hope you get some idea.

HTML

<nav>
<ul>
    <li><a href="">Home</a>
    <li><a href="">Tutorials »</a>
    <ul>
        <li><a href="">Photoshop</a>
        <li><a href="">Illustrator</a>
        <li><a href="">Web Designer »</a>
        <ul>
            <li><a href="">HTML »</a>
            <ul>
                <li><a href="">HTML4</a>
                <li><a href="">HTML5</a>
            </ul>
            <li><a href="">CSS</a>
        </ul>
    </ul>
    <li><a href="">Articles</a>
    <li><a href="">Inspiration</a>
</ul>
</nav>

CSS

nav ul ul{display:none;}
nav ul li:hover > ul{display:block;}
nav ul
{
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    box-shadow: 0 0 9 rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul:after{content: ""; clear:both; display:block;}
nav ul li {float:left;}
nav ul li:hover
{
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
nav ul li:hover a{color:#fff;}
nav ul li a{display:block; padding:25px 40px; color:#757575; text-decoration:none;}
nav ul ul{background:#5f6975; border-radius:0; padding:0;   position:absolute; top:100%;}
nav ul ul li
{
    float:none; border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a; position:relative;
}
nav ul ul li a{padding: 15px 40px; color: #fff;}
nav ul ul li a:hover{background:#4b545f;}
nav ul ul ul{position: absolute; left: 100%; top:0;}