ThemeKings Blog

Pure CSS Horizontal Menu With Horizontal Dropdown

Posted by:

Best Horizontal CSS Menu

Nice Horizontal Dropdown Menu

 ThemeKings has an easy to use Horizontal Menu created strictly of CSS and HTML that can be embedded within any website. No images were used to create this menu and it is compatible with any of today’s modern web browsers.

 See Pure CSS Horizontal Menu Demo

 I’ve used black and gray menus in my demo, but other color variations can be created by customizing the CSS file.

 Below is the CSS code used for this menu:

.container {
	width: 880px;
	padding: 40px;
	margin: 0 auto;
	z-index: 10;
}

#main_navigation {
	width: 880px;
	top: 20px;
	font-size: 12px;
	float: left;
	height: 50px;
	outline: none;
	margin-bottom: 80px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	min-height: 50px;
	border-bottom: 2px solid #FFF;
}
.main-menu {
	display: block;
	z-index: 22222;
	font-family: 'Droid Arabic Kufi', tahoma, serif;
	letter-spacing: 0pt;
}
.main-menu ul li a, .main-menu ul li a:link, .main-menu ul li a:visited, .searchholder {
	border-bottom: 4pt solid transparent;
	padding-bottom: 10px;
	padding-top: 8px;
}
.main-menu ul {
	margin: 0;
	padding: 0px;
	list-style-type: none;
	z-index: 10000;
	position: relative;
}
.main-menu ul li {
	display: inline;
	float: left;
	z-index: 100000;
}
.main-menu ul li > ul {
	z-index: 0;
	visibility: hidden;
	display: inline;
	opacity: 0;
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 50px;
	left: -30px;
	color: #FFF;
	width: 880px;
}
.main-menu ul li:hover > ul {
	display: block;
	visibility: visible;
	left: 0px;
	opacity: 1;
}
.main_list_item {
	height: 40px;
	z-index: 0;
}
.main_list_item > a.parent {
	position: relative;
}
.main_list_item > a.parent:after {
	content: "";
	position: absolute;
	left: 44%;
	top: 0px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #FFF;
}
.main-menu ul li a.main_list_link, .main-menu ul li a.main_list_link:link {
	line-height: 30px;
	text-shadow: none;
	font-size: 13px;
	text-transform: uppercase;
}
.main-menu ul li > a {
	display: block;
	text-decoration: none;
	padding: 0px 15px;
	/*border-radius:3px;*/
}
* html .main-menu ul li a {
	display: inline-block;
}
.main-menu ul li ul li a {
	margin: 0px;
}
.main-menu ul ul {
	background: #FFF;
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
	z-index: 101;
	color: #707070;
	width: 100%;
	position: absolute;
	left: 0px;
	overflow:hidden;
}
.main-menu ul li ul li {
	position: relative;
}
.main-menu ul ul li a, .main-menu ul ul li a:link, .main-menu ul ul li a:visited {
	height: 100%;
	text-transform: capitalize;
	margin-right: 0px!important;
	margin-left: 0px!important;
	font-size: 14px;
	color: #707070;
	z-index: 1000;
}
.main-menu ul ul li:hover > a {
	cursor: pointer;
	text-decoration: none!important;
	padding-left: 30px;
}
.main-menu ul ul li > a:after {
	content: "";
	opacity: 0;
	position: absolute;
	left: 20px;
	top: 16px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 5px solid #FFFFFF;
}
.main-menu ul ul li:hover > a:after {
	content: "";
	opacity: 1;
	position: absolute;
	left: 0px;
	top: 14px;
	width: 0;
	height: 0;
	border-left: 5px solid #FFFFFF;
}
.main-menu ul ul ul {
	position: absolute;
	top : -2px;
	left: 100;
}
/* COLORS */
/* *********************************************************************************************************** */
/* BLACK */
.black {
	/* gradient */
	background-position: 0% 0%;
	border: 0px solid #EEE;
	background-image: linear-gradient(top, #363636, #1f1f1f); /* W3C */ /* IE5.5 - 7 */ /* IE8 */ /* IE9 */ /* Firefox */;
	background-color: #222;
	background-repeat: repeat;
	background-attachment: scroll;
}
.black .main_list_item:after {
	content: "";
	z-index: -1;
	position: absolute;
	border-right: 1px solid #353b3f;
	box-shadow: 1px 0px 0px #121517;
	height: 25px;
	top: 13px;
	background: #FFF;
}
.black ul li > a {
	color: #FFF;
}
.black ul ul li:hover > a {
	text-decoration: none!important;
	color: #FFF!important;
	background: #333;
	padding-left: 30px;
	text-shadow: 1px 0px 0px #3080b0;
}
.black ul li a:hover, .black ul li:hover a {
	color: #707070!important;
}
.black ul ul {
	border-top: 2px solid #ce462b;
	border-bottom: 1px solid #ce462b;
}
/* GRAY */
.gray {
	/* gradient */
	background-position: 0% 0%;
	border: 0px solid #EEE;
	background-image: linear-gradient(top, #959da4, #7e858b); /* W3C */ /* IE5.5 - 7 */ /* IE8 */ /* IE9 */ /* Firefox */;
	background-color: #959da4;
	background-repeat: repeat;
	background-attachment: scroll;
}
.gray ul ul {
	border-top: 2px solid #333333;
	border-bottom: 1px solid #333333;
}
.gray ul ul li:hover > a {
	text-decoration: none!important;
	color: #FFF!important;
	background: #959da4;
	padding-left: 30px;
	text-shadow: 1px 0px 0px #898989;
}
.gray ul li a {
	color: #333;
}
.gray ul li > a:hover, .gray ul li:hover > a {
	color: #FFF!important;
}
.gray .main_list_item:after {
	content: "";
	position: absolute;
	border-right: 1px solid #a3a8ad;
	box-shadow: 1px 0px 0px #6e7378;
	height: 25px;
	top: 13px;
	background: #FFF;
}
/* border fix */
.main_list_item:first-child:after {
	border-right: none;
}
nav {
	text-align: center;
}
.clear {
	clear: both;
}

 And here is the HTML code for the menu:

<div class="container">
	
	<!--  Gray Menu Starts Here -->
	<div id="main_navigation" class="black main-menu ">
		
		<ul>
			<li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="#" title="Home">Home</a></li>
			<li class="main_list_item"><a class="parent main_list_link" href="#">Products</a>
				<ul>
					<li><a href="#">Product 1</a></li>
					<li><a href="#">Product 2</a>
						<ul>
							<li><a href="#">Product 2a</a></li>
							<li><a href="#">Product 2b</a></li>
							<li><a href="#">Product 2c</a>
								<ul>
									<li><a href="#">Product 2c-1</a></li>
									<li><a href="#">Product 2c-2</a></li>
									<li><a href="#">Product 2c-3</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="main_list_item"><a class="parent main_list_link" href="#">Locations</a>
				<ul>
					<li><a href="#">Columbus</a></li>
					<li><a href="#">Pickerington</a></li>
					<li><a href="#">Dublin</a></li>
				</ul>
			</li>
			<li class="main_list_item"><a class="main_list_link" href="#">Staff</a></li>
			<li class="main_list_item"><a class="main_list_link" href="#">Services</a></li>
			<li class="main_list_item"><a class="main_list_link" href="#">Testimonials</a></li>
			<li class="main_list_item"><a class="parent main_list_link" href="#">Options</a>
				<ul>
					<li><a href="#">Options 1</a></li>
					<li><a href="#">Options 2</a></li>
					<li><a href="#">Options 3</a></li>
				</ul>
			</li>
			<li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="../index.html" title="Home">FAQ</a></li>
			<li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="../contact.php" title="Home">CONTACT US</a></li>
		</ul>
	</div>
	<!-- END-->

	
</div>	

 This can be used by anyone with moderate knowledge of HTML and CSS. If you have any questions please feel free to ask. Enjoy!

 
0
  Related Posts
  • No related posts found.

You must be logged in to post a comment.