How To Add Vertical Sub-menu To Horizontal Menu Using Css And Html?

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:

Solution 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.

Solution 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;}

Share