Css put lists side by side using jquery ui -

how position top rated category inline right of genre category. @ moment stacked , don't proper navigation bar. thanks.

<section id="menu-section"> <div class="col-md-12">     <div class="container">         <ul id="menu">             <li class="ui-widget-header">categories</li>             <li>@html.actionlink("classical", "categories", new { category = categoryenum.classical }, new { @class = "categories" })</li>             <li>@html.actionlink("alternative", "categories", new { category = categoryenum.alternative }, new { @class = "categories" })</li>             <li>@html.actionlink("blues", "categories", new { category = categoryenum.blues }, new { @class = "categories" })</li>             <li>@html.actionlink("children's", "categories", new { category = categoryenum.childrens }, new { @class = "categories" })</li>             <li>@html.actionlink("country", "categories", new { category = categoryenum.country }, new { @class = "categories" })</li>             <li>@html.actionlink("dance", "categories", new { category = categoryenum.dance }, new { @class = "categories" })</li>             <li>@html.actionlink("electronic", "categories", new { category = categoryenum.electronic }, new { @class = "categories" })</li>             <li>@html.actionlink("hip-hop/rap", "categories", new { category = categoryenum.hiphoprap }, new { @class = "categories" })</li>             <li>@html.actionlink("instrumental", "categories", new { category = categoryenum.instrumental }, new { @class = "categories" })</li>             <li>@html.actionlink("jazz", "categories", new { category = categoryenum.jazz }, new { @class = "categories" })</li>             <li>@html.actionlink("k-pop", "categories", new { category = categoryenum.kpop }, new { @class = "categories" })</li>             <li>@html.actionlink("metal", "categories", new { category = categoryenum.metal }, new { @class = "categories" })</li>             <li>@html.actionlink("opera", "categories", new { category = categoryenum.opera }, new { @class = "categories" })</li>             <li>@html.actionlink("pop", "categories", new { category = categoryenum.pop }, new { @class = "categories" })</li>             <li>@html.actionlink("r&b-soul", "categories", new { category = categoryenum.randbsoul }, new { @class = "categories" })</li>             <li>@html.actionlink("reggae", "categories", new { category = categoryenum.reggae }, new { @class = "categories" })</li>             <li>@html.actionlink("rock", "categories", new { category = categoryenum.rock }, new { @class = "categories" })</li>             <li>@html.actionlink("soundtrack", "categories", new { category = categoryenum.soundtrack }, new { @class = "categories" })</li>              <li class="ui-widget-header rating">top rated</li>             <li>@html.actionlink("today", "toprated", new { rating = ratingenum.today }, new { @class = "rating" })</li>             <li>@html.actionlink("weekly", "toprated", new { rating = ratingenum.weekly }, new { @class = "rating" })</li>             <li>@html.actionlink("30 days", "toprated", new { rating = ratingenum.thirtydays }, new { @class = "rating" })</li>             <li>@html.actionlink("all time", "toprated", new { rating = ratingenum.alltime }, new { @class = "rating" })</li>             <li>@html.actionlink("recently published", "recentlypublished", new { @class = "rating" })</li>         </ul>     </div> </div> 

wrap them ul:

.outer > li {  display: inline-block;  }

<ul class="outer">      <li>          <ul>              <li class="ui-widget-header">categories</li>              <li>...</li>              <li>...</li>              <li>...</li>          </ul>      </li>      <li>          <ul>              <li class="ui-widget-header rating">top rated</li>              <li>...</li>              <li>...</li>              <li>...</li>          </ul>      </li>  </ul>