title: HTML Nav with dropdowns in equal columns
body: <p>I am trying to create a horizontal navigation that when you rollover the root items the sub pages and their sub pages are shown below but in a 3 or 4 column layout. I have experimented with the css "column count" but it is not giving me consistent results. I am wondering if anyone has come across this before or could point me in the right direction.</p>
  
  <pre><code>&lt;ul id="nav"&gt;
  &lt;li class="nonActive rootNav" id="rootNav1"&gt;
    &lt;a href="/for-residents/"&gt;for Residents&lt;/a&gt;
  
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/for-residents/history-of-smithville/"&gt;History of
      Smithville&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/for-residents/mission-and-vision/"&gt;Mission and Vision&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/for-residents/alerts/"&gt;Alerts&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/for-residents/faqs/"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="nonActive rootNav" id="rootNav2"&gt;
    &lt;a href="/for-business/"&gt;for Business&lt;/a&gt;
  
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/for-business/film-commission/"&gt;Film Commission&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/for-business/comprehensive-plan/"&gt;Comprehensive Plan&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/for-business/chamber-of-commerce/"&gt;Chamber of Commerce&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="nonActive rootNav" id="rootNav3"&gt;
    &lt;a href="/our-community/"&gt;our Community&lt;/a&gt;
  
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/our-community/calendar/"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/our-community/news/"&gt;News&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/our-community/memorial-park-project/"&gt;Memorial Park
      Project&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/our-community/city-maps/"&gt;City Maps&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/our-community/airport/"&gt;Airport&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="nonActive rootNav" id="rootNav4"&gt;
    &lt;a href="/city-departments/"&gt;city Departments&lt;/a&gt;
  
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/city-departments/police-department/"&gt;Police Department&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/city-departments/fire-department/"&gt;Fire Department&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/city-departments/parks-and-rec/"&gt;Parks and Rec&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/city-departments/public-library/"&gt;Public Library&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;
        &lt;a href="/city-departments/utilities/"&gt;Utilities&lt;/a&gt;
  
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="/city-departments/utilities/pay-online/"&gt;Pay online&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/city-departments/public-works/"&gt;Public Works&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li class="nonActive rootNav" id="rootNav5"&gt;
    &lt;a href="/city-government/"&gt;city Government&lt;/a&gt;
  
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="/city-government/city-council/"&gt;City Council&lt;/a&gt;
  
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=
          "/city-government/city-council/city-council-meeting-minutes/"&gt;City Council
          meeting minutes&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/city-government/city-manager/"&gt;City Manager&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="/city-government/city-staff/"&gt;City Staff&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;
        &lt;a href="/city-government/municipal-court/"&gt;Municipal Court&lt;/a&gt;
  
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="/city-government/municipal-court/municipal-judges/"&gt;Municipal
          Judges&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="/city-government/municipal-court/open-warrants/"&gt;Open
          Warrants&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  body {
  margin: 0px;
  }
  ul#nav {
  margin: 0px;
  padding: 0px;
  }
  ul#nav li {
  list-style-type: none;
  display: inline;
  position: relative;
  float: left;
  }
  ul#nav li a {
  display: block;
  padding: 10px;
  background-color: #EAEAEA;
  border: 1px solid #000000;
  }
  ul#nav li ul {
  display: none;
  position: absolute;
  width: 750px;
  margin: 0px 0px 0px -40px;
  clear: both;
  columns:200px 3;
  -webkit-columns:200px 3; /* Safari and Chrome */
  -moz-columns:200px 3; /* Firefox */
  }
  ul#nav li:hover ul {
  display: block;
  }
  ul#nav li ul li {
  clear: left;
  display: block;
  float: none;
  }
  ul#nav li ul li ul {
  margin: 0px;
  padding: 0px 0px 0px 10px;
  position: relative;
  }
  ul#nav li ul li ul li {
  clear: both;
  display: block;
  }
  </code></pre>
  
  <p>Here is my fiddle
  <a href="http://jsfiddle.net/drooh/GbxXH/1/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>Here are a few examples of what I am trying to achieve.
  <img src="https://i.stack.imgur.com/yiDMG.jpg" alt="4 column nav"></p>
  
  <p><img src="https://i.stack.imgur.com/glfK3.jpg" alt="enter image description here"></p>