How to create Click action Multi-level CSS3 Dropdown Menu..

/* demo page styles */ body { background:#eee; margin:0; padding:0; } .example { background:#fff url(../images/tech.jpg); width:770px; height:570px; border:1px #000 solid; margin:20px auto; padding:15px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } /* main menu styles */ #nav,#nav ul { background-image:url(../images/tr75.png); list-style:none; margin:0; padding:0; } #nav { height:41px; padding-left:5px; padding-top:5px; position:relative; z-index:2; } #nav ul { left:-9999px; position:absolute; top:37px; width:auto; } #nav ul ul { left:-9999px; position:absolute; top:0; width:auto; } #nav li { float:left; margin-right:5px; position:relative; } #nav li a { background:#c1c1bf; color:#000; display:block; float:left; font-size:16px; padding:8px 10px; text-decoration:none; } #nav > li > a { -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; border-radius:6px; overflow:hidden; } #nav li a.fly { background:#c1c1bf url(../images/arrow.gif) no-repeat right center; padding-right:15px; } #nav ul li { margin:0; } #nav ul li a { width:120px; } #nav ul li a.fly { padding-right:10px; } /*hover styles*/ #nav li:hover > a { background-color:#858180; color:#fff; } /*focus styles*/ #nav li a:focus { outline-width:0; } /*popups*/ #nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover { left:0; } #nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover { left:140px; }

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <div class="example"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a class="fly" href="#">Tutorials</a> <ul class="dd"> <li><a href="">HTML / CSS</a></li> <li><a class="fly" href="#">JS / jQuery</a> <ul> <li><a href="#">jQuery</a></li> <li><a href="#">JS</a></li> </ul> </li> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">XSLT</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li><a class="fly" href="#">Resources</a> <ul class="dd"> <li><a class="fly" href="#">By category</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a class="fly" href="#">Menu1</a> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a class="fly" href="#">Menu3</a> <ul> <li><a href="#">Menu31</a></li> <li><a href="#">Menu32</a></li> <li><a href="#">Menu33</a></li> <li><a href="#">Menu34</a></li> </ul> </li> <li><a href="#">Menu4</a></li> </ul> </li> <li><a href="#">Ajax</a></li> </ul> </li> <li><a class="fly" href="#">By tag name</a> <ul> <li><a href="#">captcha</a></li> <li><a href="#">gallery</a></li> <li><a href="#">animation</a></li> </ul> </li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Go Back To The Tutorial</a></li> </ul> </div>