Pure CSS Drop Down Menu, Complete Fully CSS 3

Saturday, August 13, 2011


Here is a SEO Friendly Horizontal Multilevel Drop Down Menu using Completely written with Pure CSS attributes and properties. You can easily format it with your own color theme and Image background by adjusting few properties  You can use this menu for your Real time projects Back office Admin Panels.

This menu written with Combination of <div> and <ul><li>, and <a> <span> Tags
Mokup for the Multi Level Menu as Followes

drop-down-menu.css
In this file you can edit your color values as per your need.
/* menu::base */
div#menu {
	float:left;
    height:30px;
	background-color:#3399CC;	
	font-size:11px;
	font-weight:bold;
	text-align:left;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
	background-color:#0099CC;		
}
div#menu ul.menu {
    padding-left: 10px;
	background-color:#3399CC;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
}
   
div#menu li:hover>ul {
    left: -2px;
}

div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    z-index: 11;
    visibility: hidden;
    padding:0px;
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu li.current a {}

/* menu::level1 */
div#menu a {
    position: relative;
    z-index: 10;
    height: 11px;
    display: block;
    float: left;	
    padding:10px;
    text-decoration: none;
	color:#000;
}
div#menu span {

	font: bold 11px Tahoma, Geneva, sans-serif;
    padding-top:0px;
    color: #000;
    font-weight:bold;
    text-transform:capitalize;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
}

div#menu ul a:hover span {
    color: #039;
}

div#menu li { border-right:1px solid #CCC; }
div#menu li.last span{
    padding:0px;
}

/* menu::level2 */
div#menu ul ul li {
    padding: 4px 0;
    z-index: 9;
	border-bottom:1px solid #000;
	border-left:1px solid #CCC;
}
div#menu ul ul {
    z-index: 12;	
    padding: 0;
    margin-top:2px;
    margin-left:0px;
    margin-right:0px;
}
div#menu ul ul a {
  	width: 184px;
  padding: 0px 7px 3px 8px;
    height: auto;
    float: none;
    display: block;
    background:none;
    margin-bottom: 2px;
    z-index: -1;
	color:#FFF;
}
div#menu ul ul a span {
	  padding: 0 10px 0px 10px;
    line-height: 20px;
    color: #000;
	font-weight:bold;
    text-transform: none;
    background:none;
}
div#menu ul ul a:hover {

}
div#menu ul ul a:hover span {

    color: #039;
}

div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
	border-bottom:1px solid #EEEEEE;
}

/* menu::level3 */
div#menu ul ul div {
    width: 208px;
    margin: -30px 0 0 190px !important;
    height: auto;
    _padding: 0 0 9px 3px;
}
div#menu ul ul ul {
	_padding-right:1px;
}

/* lava lamp */
div#menu li.back {
}
div#menu li.back .left {
}


sample-menu.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Menu Fully CSS Only</title>
<link href="drop-down-menu.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="menu">
<ul class="menu">
<li><a class="parent" href="http://www.w3lessons.com/"><span>Home</span></a></li> 
<li><a href="http://www.w3lessons.com/"><span>About us</span></a></li>

<li><a class="parent" href="javascript://"><span>Services</span></a>
<!--First Level-->             
    <div>
    <ul>
    <li><a href="http://www.w3lessons.com/"><span>SEO</span></a></li>
    <li><a href="http://www.w3lessons.com/"><span>Web Design</span></a></li>  
        <!--Second Level-->     
        <li><a href="javascript:"><span>Web Development</span></a>
            <div>
            <ul>
            <li><a href="http://www.w3lessons.com/"><span>HTML</span></a></li>
            <li><a href="http://www.w3lessons.com/"><span>CSS</span></a></li>
                 <!--Third Level-->   
                <li><a href="javascript:void(0)"><span>PHP</span></a>
                    <div>
                    <ul>
                    <li><a href="http://www.w3lessons.com/"><span> PDO</span></a></li>
                    <li><a href="http://www.w3lessons.com/"><span>MySQL</span></a></li>                
                    <li><a href="http://www.w3lessons.com/"><span>SQLite</span></a></li>                
                    </ul>
                    </div>                                     
                </li>                
            </ul>
            </div>                
        </li>   
    
    </ul>
    </div>
</li>

<li><a class="parent" href="javascript://"><span>Skills</span></a></li>
</ul>
</div>

</body>
</html>

No comments:

Post a Comment