11
Horizontal Menus / Pure CSS Menu - Horizontal Drop Down
« Last post by Swift on November 06, 2020, 10:36:37 AM »View Demo Of Pure CSS Menu
Here is the CSS Code for this menu:
Here is the HTML Code for this menu as well:
This can be used by anyone with moderate knowledge of HTML and CSS. If you have any questions please feel free to ask. Enjoy!
Here is the CSS Code for this menu:
Code: [Select]
.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;
}
Here is the HTML Code for this menu as well:
Code: [Select]
<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[/url]</li>
<li class="main_list_item"><a class="parent main_list_link" href="#">Products[/url]
<ul>
<li><a href="#">Product 1[/url]</li>
<li><a href="#">Product 2[/url]
<ul>
<li><a href="#">Product 2a[/url]</li>
<li><a href="#">Product 2b[/url]</li>
<li><a href="#">Product 2c[/url]
<ul>
<li><a href="#">Product 2c-1[/url]</li>
<li><a href="#">Product 2c-2[/url]</li>
<li><a href="#">Product 2c-3[/url]</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="main_list_item"><a class="parent main_list_link" href="#">Locations[/url]
<ul>
<li><a href="#">Columbus[/url]</li>
<li><a href="#">Pickerington[/url]</li>
<li><a href="#">Dublin[/url]</li>
</ul>
</li>
<li class="main_list_item"><a class="main_list_link" href="#">Staff[/url]</li>
<li class="main_list_item"><a class="main_list_link" href="#">Services[/url]</li>
<li class="main_list_item"><a class="main_list_link" href="#">Testimonials[/url]</li>
<li class="main_list_item"><a class="parent main_list_link" href="#">Options[/url]
<ul>
<li><a href="#">Options 1[/url]</li>
<li><a href="#">Options 2[/url]</li>
<li><a href="#">Options 3[/url]</li>
</ul>
</li>
<li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="../index.html" title="Home">FAQ[/url]</li>
<li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="../contact.php" title="Home">CONTACT US[/url]</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!