having trouble with css menu - css

Question

I have a menu like :
<ul id="nav">
<li><span>First link</span>
<ul class="extlang2">
<li class="extli"><span>A</span>
<ul class="extlang2">
<li class="extli"><span>C</span></li>
<li class="extli"><span>D</span></li>
<li class="extli"><span>E</span>
<ul class="extlang2">
<li class="extli"><span>F</span></li>
<li class="extli"><span>G</span></li>
<li class="extli"><span>H</span></li>
<li class="extli"><span>I</span></li>
<li class="extli"><span>J</span></li>
<li class="extli"><span>K</span></li>
<li class="extli"><span>L</span></li>
<li class="extli"><span>M</span></li>
</ul>
</li>
<li class="extli"><span>F</span></li>
<li class="extli"><span>G</span></li>
<li class="extli"><span>H</span></li>
<li class="extli"><span>I</span></li>
<li class="extli"><span>J</span></li>
<li class="extli"><span>K</span></li>
<li class="extli"><span>L</span></li>
<li class="extli"><span>M</span></li>
</ul>
</li>
<li class="extli"><span>B</span></li>
<li class="extli"><span>C</span></li>
<li class="extli"><span>D</span></li>
<li class="extli"><span>E</span></li>
<li class="extli"><span>F</span></li>
<li class="extli"><span>G</span></li>
<li class="extli"><span>H</span></li>
<li class="extli"><span>I</span></li>
<li class="extli"><span>J</span></li>
<li class="extli"><span>K</span></li>
<li class="extli"><span>L</span></li>
<li class="extli"><span>M</span></li>
<li class="extli"><span>N</span></li>
<li class="extli"><span>O</span></li>
<li class="extli"><span>P</span></li>
<li class="extli"><span>Q</span></li>
<li class="extli"><span>R</span></li>
<li class="extli"><span>S</span></li>
<li class="extli"><span>T</span></li>
<li class="extli"><span>U</span></li>
<li class="extli"><span>V</span></li>
<li class="extli"><span>W</span></li>
<li class="extli"><span>X</span></li>
<li class="extli"><span>Y</span></li>
<li class="extli"><span>Z</span></li>
</ul>
</li>
<li><span>Second link</span>
<li><span>Third link</span>
</ul>
How can I show the menu and submenu (which will be open by li:hover) like the picture?
[I used float:left for l but the menu items were shown like 'A B C D E F' etc. but not like the picture]
edit :
my css (sorry,my css is messed up which didn't fulfil my requirement, as you see its not like the picture)
<style type="text/css">
#nav{
list-style-type:none;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
position: relative;
list-style: none;
}
/* main level link */
#nav a,
#nav ul li:hover a,
#nav li:hover li a{
text-decoration:none;
color:#ddd;
font-weight:bold;
font-size:13px;
font-family:Arial;
line-height:55px;
height:55px;
width: 139px;
display:block;
}
#nav a span{
position:relative;
margin-right:30px;
}
#nav li:hover > a:first-child,
#nav a:hover,
#nav ul a:hover{
font-weight:bold;
color:#ff0000;
text-decoration:none;
background-color:#fff;
}
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
border:1px dotted #eee;
bottom:0px;
left: -139px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
#nav ul li a{
text-align:center !important;
}
#nav ul li a span{
margin:0px auto !important;
}
/* level 3+ list */
#nav ul ul {
left: -139px;
bottom:0px;
border:1px dotted #eee;
}
/* -------------extension area------- */
.extli{
float:left !important;
.extlang2 a{
overflow:hidden;
}
</style>

Answer 1

http://jsfiddle.net/6yQkF/
ul li {
float:left;
width: 100px;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
li {
border:1px solid #000;
background:#F00;
list-style:none;
}