Pure CSS Menu - Horizontal Drop Down

[Swift]

View Demo Of Pure CSS Menu


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!