TechnoCrat: How to create multi-level menu's using HTML and CSS

Create a style.css as follows

body {
 font: normal .8em/1.5em Arial, Helvetica, sans-serif;
 background: #ebebeb;
 width: 900px;
 margin: 100px auto;
 color: #666;
}

a {
 color: #333;
}
#nav {
 margin: 0;
 padding: 7px 6px 0;
 /*background: #7d7d7d  repeat-x 0 -110px;*/
 background:#7d7d7d;
 line-height: 100%;

 border-radius: 2em;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
}


/* main level link */
#nav a {
 font-weight: bold;
 color: #e7e5e5;
 text-decoration: none;
 display: block;
 padding:  8px 20px;
 margin: 0;

 -webkit-border-radius: 1.6em;
 -moz-border-radius: 1.6em;
 
 text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
 background: #000;
 color: #666;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
 background: #000  ;
 color: #fff;
 border-top: normal 0px #f8f8f8;

 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 box-shadow: 0 1px 1px rgba(0,0,0, .2);

 text-shadow: 0 0px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
 background: none;
 border: none;
 color: #666;

 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#nav ul a:hover {
 background: #0078ff  repeat-x 0 -100px !important;
 color: #fff !important;

 -webkit-border-radius: 0;
 -moz-border-radius: 0;

 text-shadow: 0 0px 0px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
 display: block;
}

/* level 2 list */
#nav ul {
 display: none;

 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 35px;
 left: 0;
 background: #ddd  repeat-x 0 0;
 border: solid 1px #b4b4b4;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
 float: none;
 margin: 0;
 padding: 0;
}

#nav ul a {
 font-weight: normal;
 text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
 left: 181px;
 top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
 -webkit-border-top-left-radius: 9px;
 -moz-border-radius-topleft: 9px;

 -webkit-border-top-right-radius: 9px;
 -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
 -webkit-border-bottom-left-radius: 9px;
 -moz-border-radius-bottomleft: 9px;

 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
#nav {
 display: inline-block;
} 
html[xmlns] #nav {
 display: block;
}
 
* html #nav {
 height: 1%;
}

Create body of your HTML as follows

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
                <!-- Navigation -->  
                <ul id="nav"> 
                    <li><a href="#">Home</a></li>  
                    <li><a href="#">Categories</a>  
                        <ul>  
                            <li><a href="#">All</a>  
                                <ul>  
                                    <li><a href="#">Category 1</a>  
                                        <ul class="droprightMenu">  
                                            <li>
            <a href="#">Category 1.2</a>
                                                 <ul> 
                                                    <li><a href="#">Category 1.2.1</a></li>
                                                 </ul>                                                  
                                            </li>  
                                            <li>
            <a href="#">Category 1.3</a>
            <ul> 
                                                    <li><a href="#">Category 1.3.1</a></li>
                                                 </ul>  
           </li> 
                                            <li><a href="#">Category 1.4</a></li>  
                                        </ul>
         </li>  
                                    <li><a href="#">Category 2</a></li>  
                                    <li><a href="#">Category 3</a></li>  
                                    <li><a href="#">Category 4</a></li>  
                                </ul>
       </li>  
                            <li><a href="#">Manage</a></li>  
                        </ul>
     </li>  
      
                    <li><a href="#">Profile</a>  
                        <ul>  
                            <li><a href="#">Login</a></li>  
                            <li><a href="#">Register</a></li>  
                            <li><a href="#">Edit Profile</a></li>  
                            <li><a href="#">My Posts</a></li>  
                            <li><a href="#">Logout</a></li>  
                        </ul>
     </li>  
                    <li><a href="#">Help</a></li>  
                </ul>  
</body>

And the output will look like:

3 comments:

AnonymousAugust 29, 2014 at 8:21 AM
Really nice looking menu you got here. You might want to try to add some colors that would emphasize some of the buttons, so the users will know that it should be clicked. For colors and positioning of buttons, you may use this: http://www.generatecss.com/advanced/menu-bar/
AshishJune 21, 2018 at 11:54 AM
Really awesome brother.
it's really helpfull to learn...

TechnoCrat

Thursday, August 28, 2014

How to create multi-level menu's using HTML and CSS

3 comments:

Contributors

Total Pageviews