#cssmenu { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 10px; line-height: 15px; text-transform: uppercase; text-align: left; } #cssmenu > ul { width: auto; list-style-type: none; padding: 0; margin: 0; background: #162252; border: 0px solid #ece6e8; border-bottom: 3px solid #b8b8ef; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } #cssmenu > ul li#responsive-tab { display: none; /* Hide for large screens */ } #cssmenu > ul li { display: inline-block; *display: inline; zoom: 1; } #cssmenu > ul li.right { float: right; } #cssmenu > ul li.has-sub { position: relative; } #cssmenu > ul li.has-sub:hover ul { display: block; } #cssmenu > ul li.has-sub ul { display: none; width: 250px; position: absolute; margin: 0; padding: 0; list-style-type: none; background: #162252; border: 1px solid #b8b8ef; border-bottom: 3px solid #b8b8ef; border-top: 0 none; } #cssmenu > ul li.has-sub ul li { display: block; } #cssmenu > ul li.has-sub > a { background-image: url('../images/caret.png'); background-repeat: no-repeat; background-position: 90% -95%; } #cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.has-sub > a:hover { background: #414A6F url('../images/caret.png') no-repeat; background-position: 90% 195%; } #cssmenu > ul li a { display: block; padding: 12px 30px 11px 30px; text-decoration: none; color: #F1B454; text-shadow: 0px; } #cssmenu > ul li a.active, #cssmenu > ul li a:hover { background: #414A6F; color: #fff; text-shadow: 0px; } @media (max-width: 768px) { #cssmenu > ul { width: 100%; } #cssmenu > ul li#responsive-tab { display: block; } #cssmenu > ul li#responsive-tab a { background: url('../images/menu2.png') no-repeat; background-position: 95% -35%; } #cssmenu > ul li#responsive-tab a:hover { background-color: #162252; background-position: 95% 135%; } #cssmenu > ul li { display: none; } #cssmenu > ul li.right { float: none; } #cssmenu > ul li.has-sub { position: relative; } #cssmenu > ul li.has-sub ul { display: block; position: static; width: 100%; background: #5A6EB7; border: 0 none; } #cssmenu > ul li.has-sub ul li { display: block !important; } #cssmenu > ul li.has-sub ul li a span { display: block; padding-left: 24px; } #cssmenu > ul li.has-sub > a { background-image: none; } } /* Make sure they show even if hidden in mobile view by JS */ @media (min-width: 768px) { #cssmenu > ul > li.collapsed { display: inline-block !important; *display: inline; zoom: 1; } #cssmenu > ul ul li.collapsed { display: block !important; } }