following code displays drop down menu when mouse product:hover but I want css code for 3 level drop down menu. I am not able to proceed further. I want css and html coding for multilevel drop down menu.
<!DOCTYPE html>
<html lang="en">
<head> <title></title>
<style type="text/css">
html, body, div, header, footer, aside, nav, article, section { margin: 0; padding: 0;}
header, footer, aside, nav, article, section { display: block; }
body { background: #ece9dd; font:12px Helvetica, Arial, sans-serif; line-height: 18px;}
h2 { color: #333; }
a { color: #337810; }
p { margin: 0 0 18px; }
.moveR { float:right }
.break { clear:both; margin:10px 0px; }
/* navigation { */
.navigation { background:url(images/grads.png) left -57px repeat-x;
height:45px; margin:0px;
padding:0px; z-index:1000;position:relative; }
.navigation ul li { float:left;
font-family:Arial,sans-serif;list-style:none;
font-weight:bold; font-size:14px;
border-right:1px solid #919191; }
.navigation ul li a, .navigation ul li a:visited {
color:#333;
display:block;
height:45px; line-height:45px;
padding:0 15px; }
.navigation ul li a:hover, .navigation ul li a:active, .navigation ul li a.selected {
background:url(images/grads.png) left -102px repeat-x; color:#FFF }
/*End navigation*/
/* Submenu items */
.navigation ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
// position:static;
//top:3.5em;
left:70px;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
.navigation ul ul li {
left:auto; /*resets the left:50% on the parent li */
//left:220px;
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
/* */
.navigation ul ul li a,
.navigation ul li.active li a,
.navigation ul li:hover ul li a,
.navigation ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#FFCC00;
color:#444;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
float:left;
width:100%;
}
.navigation ul ul li a:hover,
.navigation li.active ul li a:hover,
.navigation ul li:hover ul li a:hover,
.navigation ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#F9A631; /* Sub menu items background colour */
color:#fff;
float:left;
}
/* Flip the last submenu so it stays within the page */
.navigation ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
.navigation ul ul.last li {
float:right;
position:relative;
right:.8em;
}
/* Make the sub menus appear on hover */
.navigation ul li:hover ul,
.navigation ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
} /* Submenu items */
/*search*/
.S_field { padding:4px; font-size:12px; border:1px solid #b5b4b4; background:#fbfbfa; width:230px; }
.S_btn { border:1px solid #f6f6f6; width:70px; color:#FFF; font-size:12px; padding:2px 6px;
background:url(images/grads.png) left -147px repeat-x;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-khtml-border-radius:2px; border-radius:2px;}
.S_btn:hover { cursor:pointer }
.S_btn:active { background:#ff5c02; outline:none; } /*End search*/
</style>
</head>
<body>
<!-- Navigation -->
<div class="navigation">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a>
<ul><li><a href="#">Electrical Switchgears</a></li>
<ul><li><a href="#">sub-product</a></li></ul>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Link five is a long link that wraps</a></li></ul>
</li>
<li><a href="profile.html" target="_top">Profile</a></li>
<li><a href="contact.html" target="_top">Contact</a></li></ul>
<div class="moveR"> <!--Search-->
<div class="break"></div>
<form style="margin:0px 15px 0 0; padding:0px;"
action="http://styles.clipbucket.net/search_result.php"
name="search" id="search" method="get">
<input name="query" id="query" type="text" class="S_field" value="" />
<input name="submit" type="submit" class="S_btn" value="Search" />
</form></div> <!-- Search End -->
</div> <!-- END Navigation -->
</body>
</html>
This code is working in my project perfectly