Even Mega Menu Tabs
HTML
<nav class="top-bar">
<section class="top-bar-section">
<ul id="main-nav" class="center show-for-tablet-portrait-down">
<li class="borderright borderbottom"><a href="#">Discover</a></li>
<!--
-->
<li class="borderbottom"><a href="/academics/">Academics & Career Options</a></li>
<!--
-->
<li class="borderright"><a href="/admissions/">Admissions & Financial Aid</a></li>
<!--
-->
<li><a href="/student-life/index.cfm">Student Life</a></li>
</ul>
<ul id="main-nav" class="center show-for-tablet-portrait-up sf-menu sf-js-enabled">
<li><a href="#">Alumni Association</a></li>
<li class=""><a href="#">Golf Tournament Registration</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">How To Help</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">News Releases</a></li>
<!--
-->
<!--
-->
<!--
-->
</ul>
</section>
</nav>
CSS
.top-bar { background:#003f7f;}
.top-bar-section ul.center {
display: table;
float: none !important;
margin: 0 auto !important;
text-align: center;
list-style-type: disc;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
width: 100%;
background-color: transparent !important;
}
ul#main-nav.center.show-for-tablet-portrait-up {
display: table !important;
}
.top-bar-section ul.center li {float: none !important; padding: 0;}
.top-bar-section > ul.center > li:nth-of-type(odd) {border-right: none !important;}
.top-bar-section > ul.center > .borderbottom {border-bottom: none;}
.top-bar-section > ul.center > li {display: table-cell !important; width: auto; background-color: transparent !important;}
.top-bar-section ul.center li li {display: block; padding: .15rem 0 .15rem .2rem !important;}
.top-bar-section ul.center li li li{margin-left: 1rem !important;}
.top-bar-section ul.center a {
text-decoration:none;
color: #fff;
display: block !important;
font: normal 1.066rem 'Source Sans Pro', "Trebuchet", Arial, Helvetica, sans-serif !important;
padding: .875rem 1rem !important;
text-transform: uppercase;
}
.top-bar-section ul.center ul li label {border-bottom: #8fb500 1px dotted; color: #039ddb; font-size: 1.125rem; padding-bottom: 0; text-transform: uppercase;}
.top-bar-section ul.center .sf-mega a {
color: #1a2028;
}
.top-bar-section ul.center ul a {
font-size: .938rem !important;
padding: 0 !important;
text-transform: none;
}
.top-bar-section ul li ul li {float: none; text-align: left;}
.top-bar-section ul.center li:not(.has-form) a:not(.button):hover, .top-bar-section ul.center li:hover a {color: #1a2028;}
.top-bar-section ul.center li:not(.has-form):hover a:not(.button) {color: #1a2028;}
.top-bar-section ul.center li:hover {background-color: rgba(218, 218, 218, 0.78) !important;}
.top-bar-section ul.center li:not(.has-form):hover li...