Pure Css Multi-item drop down menu

This is pure css multi-item css menu. Dynamic width increase. Compatibility Checked on: Chrome, >IE9, Safari

by Shabir Gilkar

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> :: Pure CSS Multi item DropDown Menu ::</title>
    <link href="CSS/Menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="innerWrapper">
 <div class="mainNav">
                    <ul>
                        <li class="nav"><a href="#">Customers</a>
                            <div class="dropdown">
                                <ul>
                                    <li><a href="#" class="navCat">Solutions Small & medium business</a></li>
                                    <li><a href="#" class="subNav">Solutions overviews</a></li>
                                    <li><a href="#" class="subNav">Solutions overviews</a></li>
                                    <li><a href="#" class="subNav">Small & medium business</a></li>
                                    <li><a href="#" class="subNav">Solutions overviews</a></li>
                                    <li><a href="#" class="subNav">Small & medium business</a></li>
                                    <li><a href="#" class="subNav">Small & medium business</a></li>
                                    <li><a href="#" class="subNav">Small & medium business</a></li>
                                </ul>
                                <ul>
                                    <li>
                                        <div class="navCatNC">
                                            Solutions Small & medium business</div>
                                    </li>
                                    <li><a href="#" class="subNav">Solutions overviews</a></li>
                                    <li><a href="#" class="subNav">Solutions overviews</a></li>
                                    <li><a href="#" class="subNav">Small & medium business</a></li>
                                    <li><a href="#" class="subNav">Solutions overviews</a></li>
                                    <li><a href="#" class="subNav">Small & medium...

CSS

/*----
Author: Shabir Gilkar
Contact: [email protected]
URL: http://www.vitizon.com

License: Any body is free to use this menu
-------*/

*{Padding:0px; margin:0px;}

body, html
{
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

body
{
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 12px;
    color: #fff;
    background-color:#002A54;       
}

a{text-decoration:none;}
.mainWrapper
{   
    width: 1004px;   
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background:#002A54;
    margin: 0 auto -30px;
   
}


/*------ Main Nav starts -------*/

 .mainNav
{
    font-family: Helvetica, Arial, Sans-Serif;
    height: 40px;
    background-color: rgba(214,214,214,0.19);
    border: 1px solid rgba(214,214,214,0.36);
    margin: 40px 15px;
}

.mainNav ul
{
    list-style: none;
    padding: 0px;
    margin: 0px;
    line-height: 40px;
}

.mainNav ul li
{
    display: inline-block;
    padding: 0px;
    margin: 0;
}

.mainNav ul li.nav
{
    font-family: SegoeUI;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    line-height:40px;
    padding: 0 10px;
}

.mainNav ul li.nav:hover
{
    background: rgba(237,237,237,1);
    padding: 0 10px;
    cursor:pointer;
    color:#042446 !Important;
}

.mainNav ul li.nav > a
{
    color:#ffffff;
}

.mainNav ul li.nav > a:hover
{
   color:#042446;
}

.mainNav ul li.nav .dropdown
{
    display:none;
}

.mainNav ul li.nav:hover .dropdown,
.mainNav ul li.nav:hover .dropdown:focus
{
    position:absolute;
    display: block;
    background: rgba(237,237,237,1);
    height:auto;
    width:auto;
    max-width:500px;    
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    padding: 20px;
    margin:0 0 0 -10px;
}

.mainNav ul li.nav:last-child:hover .dropdown
{
    max-width:350px;    
}

.mainNav ul li.nav:hover .dropdown ul
{    
    float:left;
    list-style: none;
    padding: 0px;
    margin:10px 10px 0 0;
    width: 150px;
   ...