Pure CSS3 Multi Level Drop Down Menu

Pure CSS3 Multi Level Drop Down Menu Created by Pradip Kumar

HTML

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="wrapper">
  <nav>
    <ul>
	 <li class="submenu"><a href="F:\kALIKE WEBSITE TESTING\KALIKE MIS DASHBOARD\WASH.html">HOME</a></li>	
	  <li class="submenu"><a href="F:\kALIKE wEBSITE TESTING\KALIKE MIS DASHBOARD\WASH.html">Education</a>
	   <ul>	
          <li class="submenu"><a href="#">FORMS</a>
                <ul>
                        <li><a href="https://ee.humanitarianresponse.info/x/#YYI7" target="_blank">School Profile</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#YYIR" target="_blank">School Strength / Enrollment details</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#YYIV" target="_blank">LIP Child Profile</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#EaaicLxq" target="_blank">Child Assessment Tool</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#EfVyCZzj" target="_blank">LIP Monitoring Tool</a></li>
						
						<li><a href="https://ee.humanitarianresponse.info/x/#YYDI" target="_blank">SDMC Meeting form</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#ZvNLe6kC" target="_blank">Parents Meeting Record</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#YYDN" target="_blank">NALI-KALI Attendance Tracker</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#YYDV" target="_blank">Library Extensive Monitoring Tool</a></li>
						<li><a href="https://ee.humanitarianresponse.info/x/#YYDX" target="_blank">MIS Tool for Nali-kali</a></li>
						
                </ul>
          </li>
		    <li class="submenu"><a href="#">DASHBOARD</a>
			<ul>
                <li><a href="https://app.powerbi.com/view?r=eyJrIjoiNTBjM2RhNzItYTRkNC00OGJkLWJlY2QtMjg1YzQ3NGE5MDdmIiwidCI6IjNjMzA3YzY5LWEwNjQtNDA2NC05MzkwLWJmNTg2MzhhNDcxYiJ9" target="_blank">School Profile</a></li>
						<li><a...

CSS

body {
    font:normal 1em Arial, Helvetica, sans-serif;
}

.wrapper {
    width:960px;
    max-width:98%;
    margin:30px auto;
}
/* Pure CSS DropDown Multilabil DropDown Menu */
 nav {
    display:block;
    width:100%;
}
nav ul {
    padding:0;
    margin:0;
    list-style:none;
}
nav ul li {
    position:relative;
}
nav ul a {
    text-decoration:none;
    color:#fff;
}
nav > ul > li {
    float:left;
    margin-right:1px;
    background:#906;
    -webkit-transition:background 500ms;
    -moz-transition:background 500ms;
    -o-transition:background 500ms;
    transition:background 500ms;
}
nav > ul > li > a {
    display:inline-block;
    padding:4px 10px 0;
    height:25px;
}
nav > ul > li.submenu > a {
    padding-right:5px;
}
nav > ul > li:hover {
    background:#000;
}
nav li.submenu {
    padding-right:22px;
}
nav li.submenu:before {
    content:"☞";
    display:block;
    position:absolute;
    top:4px;
    right:0;
    color:#fff;
    width:16px;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-transition:transform 200ms;
    -moz-transition:transform 200ms;
    -o-transition:transform 200ms;
    transition:transform 200ms;
}
nav li.submenu:hover:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
nav li.submenu li.submenu:hover:before {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
nav ul ul {
    position:absolute;
    left:0;
    top:29px;
    width:180px;
    filter:alpha(opacity="0");
    opacity:0;
    background:#666;
    font-size:12px;
    border:1px solid #000;
    border-bottom:0;
    border-top:0;
    -webkit-transition:.5s opacity;
    -moz-transition:.5s opacity;
    -o-transition:.5s opacity;
    transition:.5s opacity;
}
nav...