css3 Dropdown Menu

1.html

<html>
	<head>
		<title>Dropdown menu</title>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li><a href="javascript:;" class="link_newproduct">Home</a></li>
				<li><a href="javascript:;">Womens wear</a>
					<ul>
						<li><a href="javascript:;">SHAREE</a></li>
						<li><a href="javascript:;">KAMIZ</a></li>
						<li><a href="javascript:;">STICHED DRESS</a></li>
						<li><a href="javascript:;">KURTA</a></li>
						<li><a href="javascript:;">UNSTICHED DRESS</a></li>
						<li><a href="javascript:;">PANJABEE</a></li>
						<li><a href="javascript:;">FATUA</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">Mens wear</a>
					<ul>
						<li><a href="javascript:;">Shirt</a></li>
						<li><a href="javascript:;">Pant</a></li>
						<li><a href="javascript:;">FATUA</a></li>
						<li><a href="javascript:;">T-Shirt</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">Girls wear</a>
					<ul>
						<li><a href="javascript:;">KAMIZ</a></li>
						<li><a href="javascript:;">STICHED DRESS</a></li>
						<li><a href="javascript:;">FATUA</a></li>
						<li><a href="javascript:;">SHAREE</a></li>
					</ul>

				</li>
				<li><a href="javascript:;">West rang</a>
					<ul>
						<li><a href="javascript:;">Kamiz</a></li>
						<li><a href="javascript:;">T-shirt</a></li>
						<li><a href="javascript:;">Shirt</a></li>
						<li><a href="javascript:;">Panjabee</a></li>

					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

2.css

#menu {
  border-bottom: 1px solid #ff9a02;
  border-top: 1px solid #ff9a02;
  float: left;
  background: #FFC107;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li {
  float: left;
  list-style: none outside none;
  padding: 0;
  position: relative;
  border-right: 1px solid #FFEB00;
}

#menu ul li:hover ul {
  visibility: visible;
}

#menu ul li ul {
  position: absolute;
  visibility: hidden;
  background: none repeat scroll 0 0 #FFC107;
  z-index: 9999999;
  padding: 0;
}

#menu li a {
  color: #AF1D1D;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: left;
  padding: 12px 17px;
  text-transform: uppercase;
  text-decoration: none;
}

#menu ul li ul li {
  border-bottom: 1px solid #fff;
}

#menu ul li ul li a {
  font-size: 12px !important;
  width: 145px;
  color: #000;
}

#menu ul li ul li a:hover {
  color: #fff;
}

Output:
dropdown-menu

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s