css菜单有问题

Question

我有一个菜单，例如：

<ul id="nav">
  <li><a href="#"><span>First link</span></a>
<ul class="extlang2">
  <li class="extli"><a href="#"><span>A</span></a>
     <ul class="extlang2">
           <li class="extli"><a href="#"><span>C</span></a></li>
           <li class="extli"><a href="#"><span>D</span></a></li>
           <li class="extli"><a href="#"><span>E</span></a>
               <ul class="extlang2">
                   <li class="extli"><a href="#"><span>F</span></a></li>
                   <li class="extli"><a href="#"><span>G</span></a></li>
                   <li class="extli"><a href="#"><span>H</span></a></li>
                   <li class="extli"><a href="#"><span>I</span></a></li>
                   <li class="extli"><a href="#"><span>J</span></a></li>
                   <li class="extli"><a href="#"><span>K</span></a></li>
                   <li class="extli"><a href="#"><span>L</span></a></li>
                   <li class="extli"><a href="#"><span>M</span></a></li>
              </ul>
           </li>
           <li class="extli"><a href="#"><span>F</span></a></li>
           <li class="extli"><a href="#"><span>G</span></a></li>
           <li class="extli"><a href="#"><span>H</span></a></li>
           <li class="extli"><a href="#"><span>I</span></a></li>
           <li class="extli"><a href="#"><span>J</span></a></li>
           <li class="extli"><a href="#"><span>K</span></a></li>
           <li class="extli"><a href="#"><span>L</span></a></li>
           <li class="extli"><a href="#"><span>M</span></a></li>
     </ul>
 </li>
  <li class="extli"><a href="#"><span>B</span></a></li>
  <li class="extli"><a href="#"><span>C</span></a></li>
  <li class="extli"><a href="#"><span>D</span></a></li>
  <li class="extli"><a href="#"><span>E</span></a></li>
  <li class="extli"><a href="#"><span>F</span></a></li>
  <li class="extli"><a href="#"><span>G</span></a></li>
  <li class="extli"><a href="#"><span>H</span></a></li>
  <li class="extli"><a href="#"><span>I</span></a></li>
  <li class="extli"><a href="#"><span>J</span></a></li>
  <li class="extli"><a href="#"><span>K</span></a></li>
  <li class="extli"><a href="#"><span>L</span></a></li>
  <li class="extli"><a href="#"><span>M</span></a></li>
  <li class="extli"><a href="#"><span>N</span></a></li>
  <li class="extli"><a href="#"><span>O</span></a></li>
  <li class="extli"><a href="#"><span>P</span></a></li>
  <li class="extli"><a href="#"><span>Q</span></a></li>
  <li class="extli"><a href="#"><span>R</span></a></li>
  <li class="extli"><a href="#"><span>S</span></a></li>
  <li class="extli"><a href="#"><span>T</span></a></li>
  <li class="extli"><a href="#"><span>U</span></a></li>
  <li class="extli"><a href="#"><span>V</span></a></li>
  <li class="extli"><a href="#"><span>W</span></a></li>
  <li class="extli"><a href="#"><span>X</span></a></li>
  <li class="extli"><a href="#"><span>Y</span></a></li>
  <li class="extli"><a href="#"><span>Z</span></a></li>
</ul>
</li>
<li><a href="#"><span>Second link</span></a>
<li><a href="#"><span>Third link</span></a>
</ul>

如何像图片一样显示菜单和子菜单（将由li:hover 打开）？

[我将float:left 用于l，但菜单项显示为“A B C D E F”等，但与图片不同]

编辑：

我的 css（抱歉，我的 css 搞砸了，不符合我的要求，因为你看到它不像图片）

<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;
}