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