Horizontal Menu with colums

I have categories being called from the database and they are going past the bottom of the screen which is making users scroll down to see them all.

If you look at the image, that is what I am after.

I have looked at examples and I can get the effect if I manually add the links, but I want them to get called.

Here is the code for the links.

<ul class="nav" id="nav">
    <li><a href="/pages/about" class="scroll">About Us</a></li>
        @foreach($sections as $section)
         <li class="section">
            <a href="#" class="cat-toggle dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>
         <ul class="categories dropdown-menu">
            @foreach($section->categories as $category)
            <li><a href=""></a></li>
             @endforeach
          </ul>
        </li>
      @endforeach
    <li><a href="/pages/engineering-services" class="scroll">Engineering Services</a></li>
  <li><a href="#contact" class="scroll">Contact Us</a></li>
 <div class="clear"></div>
</ul>

This is done in laravel.

Here is an example of what I am after

via WebbieWorks