Complicated UL>LI multi level columned and inline styling - html

Question

I've never had a problem so hard as this, I can't even get started so I don't have a very good fiddle to show you, only the source code and what I'm trying to achieve.
I need a three level UL. The top level being inline - for top level navigation. The sub UL's and LI's will be inline-block - more or less.
Here's an image of what I mean: http://www.smileycat.com/miaow/archives/images/megamenus/ea.gif
I need something similar to this, kind of like a mega drop down I suppose? Can anyone help or point me in the right direction?
JSFiddle: http://jsfiddle.net/RVQ6m/
Some code:
<ul class="level1">
<li class="level1">top
<ul class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 1

Well,
for one I think your doing this all wrong and you need to look at it a different way. From the image example you provided this seems more like a div showing and hiding content as apposed to a bunch of nested Unordered list. Also, I'm not sure what script you would like to use in order to achieve the effect you are looking for. For simplicity sake. I started you off by creating a Div that you can show and hide using JavaScript or a library of your choice. All you need to do now is find a script that will toggle (show and hide the div on mouseover) Note: the Div #games-display should not be displayed when a user lands on the page.
http://jsfiddle.net/jimmyt1001/Bz9QA/
First Your CSS
<style type="text/css">
.nav-container {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
div.column {
border-left: 2px #dedede solid;
width:156px;
float:left;
padding: 11px 25px 5px 11px;
}
div.column:nth-child(1)
{
border-left:none;
}
.column a {
line-height:1.7em;
}
ul {
color:#3173d4;
}
.column.highlight a {
color:#3173d4;
font-weight:bold;
}
.clear-fix {
clear:both;
}
#games-display {
width:580px;
height:273px;
border-top: 6px #639df4 solid;
border-right: 1px #639df4 solid;
border-left: 1px #639df4 solid;
border-bottom: 1px #639df4 solid;
background-color:#fff;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding:10px;
}
.display-header {
width:135px;
height:5px;
background-color:#f7f7f7;
font-weight:bold;
padding:8px 5px 15px 15px;
border: 1px #c5c5c5 solid;
}
.featured {
width:135px;
height:125px;
background-color:#f7f7f7;
text-align:center;
font-weight:bold;
padding:12px;
border: 1px #c5c5c5 solid;
}
</style>
And then your HTML
<div class="nav-container">
Nav Link
<div id="games-display">
<div class="column highlight">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div class="featured">
Featured Info
</div>
</div>
<div class="column">
<div class="display-header">Column 2</div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
<div class="column">
<div class="display-header">Column 3</div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
<div class="clear-fix"></div> <!-- Very dirty way of removing float property -->
</div>
</div>