How to create three columns in navigation submenu - html

Question

I was able to successfully create a navigation menu with a submenu that appears on hover. However, I would like my submenus to have columns. I used Vanga Sasidhar's tips on creating the hover nav, I now need to create the columns under the Solutions and Support menu items.
Here is my jsfiddle: http://jsfiddle.net/DKu7p/.
Here is my CSS:
.site-nav li {
display:block;
float:left;
list-style:none;
margin: 0;
position: relative;
width: 100px;
}
.site-nav li:hover {
background:#1f78c3;
cursor:pointer;
}
.site-nav li a {
color:#696969;
display:block;
text-align:center;
text-decoration:none;
padding:5px 10px;
}
.site-nav li a:hover {
color:#00598B;
display:block;
text-align:center;
text-decoration:none;
padding:5px 10px;
}
.site-nav .dropdown {
display : none;
position : relative;
}
.site-nav .dropdown li { float : none; }
.site-nav li:hover .dropdown { display : block; position: relative; }
.dropdown {
background: #fff;
border: 1px solid #fff;
border-top: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
list-style: none;
margin: 4px 0 0 -9px;
min-width: 150px;
overflow: hidden;
padding: 0;
position: relative;
z-index: 999;
}
.dropdown li {
border: 0;
border-radius: 0;
clear: both;
float: none;
font-size: .9em;
margin: 0;
width: 100%;
}
.dropdown li span {
display: none !important;
}
.dropdown li a {
background: none;
color: #333;
display: block;
font-size: 1.1em;
font-weight: normal;
padding: 5px 8px;
text-align: left;
text-shadow: none;
}
.dropdown li a:hover {
background: #ddd;
color: #0c84bb;
text-decoration: none;
}
.dropdown .last a {
border-bottom: none;
}

Answer 1

Ok, here my try:
Apply the three column css layout
.col-columned{
width: 450px;
}
.col-maincontainer{
width: 450px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
.col-maincontainer ul, .col-maincontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.col-contentwrapper{
float: left;
width: 100%;
}
.col-contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
.col-leftcolumn{
float: left;
width: 150px; /*Width of left column in pixel*/
margin-left: -450px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}
.col-rightcolumn{
float: left;
width: 150px; /*Width of right column*/
margin-left: -150px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}
.col-innertube{
margin: 3px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
And then, add a new element with the html markout of three columns:
<a class="drop-link">Example1</a>
<ul class="dropdown col-columned">
<li>
<div class="col-maincontainer">
<div class="col-contentwrapper">
<div class="col-contentcolumn">
<div class="col-innertube">
<div class="wiki-tree">
<ul>
<li><a class="dropdown-title">topic1</a></li>
<li><a class="dropdown-title">topic2</a></li>
<li><a class="dropdown-title">topic3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-leftcolumn">
<div class="col-innertube">
<div class="wiki-tree">
<ul>
<li><a class="dropdown-title">topic1</a></li>
<li><a class="dropdown-title">topic2</a></li>
<li><a class="dropdown-title">topic3</a></li>
</ul>
</div>
</div>
</div>
<div class="col-rightcolumn">
<div class="col-innertube">
<div class="wiki-tree">
<ul>
<li><a class="dropdown-title">topic1</a></li>
<li><a class="dropdown-title">topic2</a></li>
<li><a class="dropdown-title">topic3</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
Make sure to add the col-columned to the dropdown element like this:
<ul class="dropdown col-columned">
Here the live example: http://jsfiddle.net/8fgG5/1/