Hover Drop down

by padma rubhan

HTML

<body>
	<section onclick="">
		<nav class="menu left" aria-haspopup="true" aria-controls="p1">
			<ul id="p1">
				<li class="current"><a href="index.html">Main-menu</a><b></b></li>
				<li aria-haspopup="false"><a href="index.html">Sub-menu1</a><b></b></li>
				<li aria-haspopup="false"><a href="index.html">Sub-menu2</a><b></b></li>
				<li aria-haspopup="false"><a href="index.html">Sub-menu3</a><b></b></li>
				<li aria-haspopup="false"><a href="index.html">Sub-menu4</a><b></b></li>
			</ul>
		</nav>
	</section>
</body>

CSS

section {
			display:block;
			padding:0;
			margin:0 auto;
			max-width:1200px;
			min-width:320px;
			}
		.menu {
			display:block;
			padding:0;
			margin:0;
			height:42px;
			position:relative;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			-o-user-select:none;
			user-select:none;
			-ms-touch-action:none;
			}
		.menu img {
			position:absolute;
			left:5px;
			top:14px;
			z-index:100;
			display:none;
			}
		.menu ul {
			padding:0;
			margin:0;
			border:1px solid #aaa;
			background:#fff;
			}
		.menu ul li {
			display:inline-block;
			position:relative;
			background:#fff;
			}
		.menu ul li {
			*display:inline;
			}
		.menu ul li a {
			display:block;
			font:normal 14px/40px 'Verdana', arial, sans-serif;
			color:#444;
			text-decoration:none;
			padding:0 25px;
			}
		.menu ul li a:hover {
			color:#a00;
			}
		.menu ul li.current a {
			color:#c00;
			z-index:100;
			}
		.menu ul li.current b {
			display:block;
			width:100%;
			height:40px;
			position:absolute;
			top:0;
			left:0;
			background:url(images/trans.gif);
			}
		.menu.center {
			text-align:center;
			}
		.menu.right {
			text-align:right;
			}
		@media only screen and (max-width:880px) {
			.menu {
				width:200px;
				}
			.menu.center {
				margin:0 auto;
				text-align:left;
				}
			.menu.right {
				margin:0 0 0 auto;
				text-align:left;
				}
			.menu img {
				display:block;
				}
			.menu ul li {
				display:block;
				margin-bottom:-40px;
				-webkit-transition:0.5s;
				-moz-transition:0.5s;
				-o-transition:0.5s;
				transition:0.5s;
				}
			.menu ul li:last-child {
				margin-bottom:0;
				}
			.menu ul li.current {
				display:block;
				z-index:10;
				}
			.menu:hover ul li {
				margin-bottom:0;
				}
			}
		@media only screen and (max-device-width:1024px) and (orientation:portrait) {
			.menu {
				width:200px;
				}
			.menu.center {
				margin:0 auto;
				text-align:left;
				}
			.menu.right {
				margin:0 0 0...