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:

<ulid="navbar"><!-- The strange spacing herein prevents an IE6 whitespace bug. --><divclass="spotlightmenu"><ul><li><ahref="#">helloWorld</a><ul><li><ahref="#">SubItem1<a></li><li><ahref="#">Subitem2<a></li><li><ahref="#">SubItem3<a></li></ul></li><li><ahref="#">Section2<a></li><li><ahref="#">Section3<a></li><li><ahref="#">Section4<a></li><li><ahref="#">Section5<a></li></ul></div>

Css:

.spotlightmenuulliul{
        display:none;
}
.spotlightmenuulli: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><ahref="">Home</a><li><ahref="">Tutorials »</a><ul><li><ahref="">Photoshop</a><li><ahref="">Illustrator</a><li><ahref="">Web Designer »</a><ul><li><ahref="">HTML »</a><ul><li><ahref="">HTML4</a><li><ahref="">HTML5</a></ul><li><ahref="">CSS</a></ul></ul><li><ahref="">Articles</a><li><ahref="">Inspiration</a></ul></nav>

CSS

navulul{display:none;}
navulli:hover > ul{display:block;}
navul
{
    background: #efefef;
    background: linear-gradient(top, #efefef0%, #bbbbbb100%);
    background: -moz-linear-gradient(top, #efefef0%, #bbbbbb100%);
    background: -webkit-linear-gradient(top, #efefef0%, #bbbbbb100%);
    box-shadow: 009rgba(0,0,0,0.15);
    padding: 020px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
navul:after{content: ""; clear:both; display:block;}
navulli {float:left;}
navulli:hover
{
    background: #4b545f;
    background: linear-gradient(top, #4f59640%, #5f697540%);
    background: -moz-linear-gradient(top, #4f59640%, #5f697540%);
    background: -webkit-linear-gradient(top, #4f59640%, #5f697540%);
}
navulli:hovera{color:#fff;}
navullia{display:block; padding:25px40px; color:#757575; text-decoration:none;}
navulul{background:#5f6975; border-radius:0; padding:0;   position:absolute; top:100%;}
navululli
{
    float:none; border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a; position:relative;
}
navulullia{padding: 15px40px; color: #fff;}
navulullia:hover{background:#4b545f;}
navululul{position: absolute; left: 100%; top:0;}

Share