.toggleMenu { display:  none; padding: 10px 15px; color: #fff; }
.nav { list-style: none; *zoom: 1; border-left: 1px solid #dadada; }
.nav:before, .nav:after { content: " "; display: table; }
.nav:after { clear: both; }
.nav ul { list-style: none; width: 350px; float: left; left: 50%; position: relative; }
.nav a { padding: 15px 15px; color: #fff; text-decoration: none; }
.nav li { position: relative; border-right: 1px solid #dadada; padding: 0 15px 0 10px; }
.nav li.hover { background: #dadada; }
.nav li.hover a { color: #000; }
.nav > li { float: left; }
.arrow { display: none; }
.nav > li > a { display: block; }
.nav li  ul { position: absolute; left: -9999px; }
.nav > li.hover > ul { left: 0; }
.nav li li.hover ul { left: 100%; top: 0; }
.nav li li { padding: 0; }
.nav li li a { display: block; background: #434750; color: #fff; position: relative; z-index:100; border-top: 1px solid #dadada; padding:10px; }
.nav li li a:hover { background: #dadada; color: #000; }
.nav li.hover li a { color: #fff; }
.nav li.hover li a:hover { color: #000; }

@media only screen and ( min-width: 580px) and ( max-width: 767px ) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    
    .toggleMenu {padding: 10px 0px; background: #23282d;
background: -webkit-linear-gradient(#434750, #23282d); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#434750, #23282d); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#434750, #23282d); /* For Firefox 3.6 to 15 */
background: linear-gradient(#434750, #23282d); /* Standard syntax */ width:100%; }

	.toggleMenu div {width: 558px; margin: 0 auto; padding-top:5px; padding-bottom:5px; }
    
    .nav{background: #434750; width: 558px; margin: 0 auto;}
    
    .nav li.hover { background: #434750; }
    
    .nav li.hover a { color: #FFF; }
   
    .nav li.hover ul li a { color: #000; }
    
    .nav li li a { display: block; background: #dadada; color:#000; position: relative; z-index:100; border-top: 1px solid #434750; }
    
    .nav li {  border-top: 1px solid #dadada; padding: 0px; }
    
    .arrow {display: inline; vertical-align: top; float: right; }
    
    .nav ul {
        display: block;
        width: 100%;
        margin-bottom: 2%;
    }
    .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}

@media only screen and ( max-width: 579px) { 
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    
    .toggleMenu {padding: 15px 0px; 
    background: #23282d;
background: -webkit-linear-gradient(#434750, #23282d); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#434750, #23282d); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#434750, #23282d); /* For Firefox 3.6 to 15 */
background: linear-gradient(#434750, #23282d); /* Standard syntax */
width:100%; }

	.toggleMenu div { padding-left:15px; }
    
    .nav{background: #434750;}
    
    .nav li.hover { background: #434750; }
    
    .nav li.hover a { color: #FFF; }
   
    .nav li.hover ul li a { color: #000; }
    
    .nav li li a { display: block; background: #dadada; color:#000; position: relative; z-index:100; border-top: 1px solid #434750; }
    
    .nav li {  border-top: 1px solid #dadada; padding: 0px; }
    
    .arrow {display: inline; vertical-align: top; float: right; }
    
    .nav ul {
        display: block;
        width: 100%;
        margin-bottom: 2%;
    }
    .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}