HTML Nav with dropdowns in equal columns - html

Question

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.
<ul id="nav">
<li class="nonActive rootNav" id="rootNav1">
for Residents
<ul>
<li><a href="/for-residents/history-of-smithville/">History of
Smithville</a></li>
<li>Mission and Vision</li>
<li>Alerts</li>
<li>FAQs</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav2">
for Business
<ul>
<li>Film Commission</li>
<li>Comprehensive Plan</li>
<li>Chamber of Commerce</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav3">
our Community
<ul>
<li>Calendar</li>
<li>News</li>
<li><a href="/our-community/memorial-park-project/">Memorial Park
Project</a></li>
<li>City Maps</li>
<li>Airport</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav4">
city Departments
<ul>
<li>Police Department</li>
<li>Fire Department</li>
<li>Parks and Rec</li>
<li>Public Library</li>
<li>
Utilities
<ul>
<li>Pay online</li>
</ul>
</li>
<li>Public Works</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav5">
city Government
<ul>
<li>
City Council
<ul>
<li><a href=
"/city-government/city-council/city-council-meeting-minutes/">City Council
meeting minutes</a></li>
</ul>
</li>
<li>City Manager</li>
<li>City Staff</li>
<li>
Municipal Court
<ul>
<li><a href="/city-government/municipal-court/municipal-judges/">Municipal
Judges</a></li>
<li><a href="/city-government/municipal-court/open-warrants/">Open
Warrants</a></li>
</ul>
</li>
</ul>
</li>
</ul>
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;
}
Here is my fiddle
fiddle
Here are a few examples of what I am trying to achieve.

Answer 1

Hm, based on your JSFiddle, I'm assuming the problem you're facing right now is that all of the submenus are lined up with the menu item that causes them to appear, and you want them aligned to only the left. You could achieve this through removing the relative positioning on <li> elements, and using left:0 on the submenus to put them where you want them.
So, your CSS adjustments would look like:
ul#nav li {
/* position:relative; */
}
ul#nav li ul {
left:0;
}
Here's a JSFiddle to show you how that look. Hope this helps! Let me know if you have any questions.

Answer 2

I'm sure there are plenty of ways to tackle this with a ton of different options - but here's one approach I worked with
#nav {
position: relative;
float: left;
}
#nav > li {
width: 20%;
}
ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
float: left;
}
ul li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
text-decoration: none;
}
ul li ul {
position: absolute;
top: 40px;
left: 0;
display: none;
}
ul li:hover > ul {
display: block;
}
/* The Rest for example purposes */
ul li ul li {
width: 25%;
}
ul li ul li a {
background: #ddd;
border: none;
}
With skipping the relative positioning on the first li children, the second level of ul's can inherit the width of the top level ul.
# http://jsfiddle.net/PqhEs/
Organized it a little differently - It all depends on how you'd want to group items in your sub sub pages, right now in the fiddle they just inherit the sub navigation's styles, but you could remove the float and adjust the width to have them list like the example.