JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="http://www.madeincima.it/download/samples/jquery/easyListSplitter/scripts/jquery.easyListSplitter.js"></script>
<div id="sub-menu-about">

            <div class="about-sub-menu"><ul id="menu-about-items" class=""><li id="menu-item-222" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page menu-item-222"><a href="http://business.beegoodmarketing.com/about/our-story/">Our Story</a><span class="separator"> | </span> </li>
<li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218"><a href="http://business.beegoodmarketing.com/about/our-mission/">Our Mission</a><span class="separator"> | </span> </li>
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219"><a href="http://business.beegoodmarketing.com/about/careers/">Careers</a><span class="separator"> | </span> </li>
<li id="menu-item-221" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-221"><a href="http://business.beegoodmarketing.com/about/our-staff/">Our Staff</a><span class="separator"> | </span> </li>
<li id="menu-item-220" class="menu-item-last menu-item menu-item-type-post_type menu-item-object-page menu-item-220"><a href="http://business.beegoodmarketing.com/about/contact-us/">Contact Us</a><span class="separator"> | </span> </li>
</ul></div>

    </div><!-- #menu-secondary .menu-container -->

CSS

#sub-menu-about{
    width:600px;
}

/* about submenu */
.about-sub-menu {
    float: right;
}
.about-sub-menu ul li {
    display: inline;
    list-style: none outside none;

}
.about-sub-menu ul li a {
    color: #EEB111;
    border: none medium;
    font-weight: 500;
}
.about-sub-menu ul li.current-menu-item a {
    color: #FFFFFF;
    border: none medium;
    font-weight: 500;
}
.about-sub-menu ul li .separator {
    color:#444444;    
}

JavaScript

$('#menu-about-items').easyListSplitter({ colNumber:2 ,  direction: 'horizontal'});