CSS導航欄的子Sub菜單沒有向右擴展

Question

我已經編寫了導航欄的代碼。我有菜單，子菜單和子子菜單。菜單和子菜單工作正常。子子菜單不起作用。他們正在垂直擴展而不是水平擴展。

的HTML代碼是：

<div id="topbar"> 
    <div class="wrapper"> 
    <div id="topnav"> 
     <ul> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="#">Products</a> 
      <ul> 
      <li><a href="#">Laptop & Notebooks</a> 
       <ul> 
        <li><a href="#">Acer</a></li> 
        <li><a href="#">Apple</a></li> 
       </ul> 
       </li>  
      <li><a href="#">Smartphone & Tablets</a></li> 
      <li><a href="#">Desktop</a></li> 
      <li><a href="#">Accessories</a> 
       <ul> 
        <li><a href="#">RAM</a></li> 
        <li><a href="#">Casing</a></li> 
        <li><a href="#">Ups & IPS</a></li> 
       </ul> 
       </li> 
      <li><a href="#">Brand PC</a></li> 
      <li><a href="#">Clone PC</a></li> 
      <li><a href="#">Camera</a></li>  
      </ul> 
     </li> 

     <li><a href="#">IT Solutions</a> 
      <ul> 
       <li><a href="#">Web Developmnet & Hosting</a></li> 
       <li><a href="#">Mobile Application Development</a> 
        <ul> 
         <li><a href="#">Android Platform</a></li> 
         <li><a href="#">Windows Platform</a></li> 
        </ul> 
       </li>  
       <li><a href="#">Software Developement</a></li> 

      </ul> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact Us</a></li> 
     </li> 
     </ul>   
    </div> 
    </div> 

和CSS是在這裏：

#topnav{ 
    display:block; 
    float:left; 
    width:660px; 
    margin:0; 
    padding:0; 
    list-style:none; 
    font-size:13px; 
    font-weight:normal; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#FFFFFF; 
    background-color:#000000; 
    } 

#topnav ul, #topnav li{ 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    } 

#topnav li a:link, #topnav li a:visited, #topnav li a:hover{ 
    display:block; 
    margin:0; 
    padding:15px 20px; 
    color:#FFFFFF; 
    background-color:#000000; 
    } 

#topnav ul ul li a:link, #topnav ul ul li a:visited{ 
    border:none; 
    } 

#topnav li.last a{ 
    margin-right:0; 
    } 

#topnav li a:hover, #topnav ul li.active a{ 
    color:#FFFFFF; 
    background-color:#059BD8; 
    } 

#topnav li li a:link, #topnav li li a:visited{ 
    width:150px; 
    float:none; 
    margin:0; 
    padding:7px 10px; 
    font-size:12px; 
    font-weight:normal; 
    color:#FFFFFF; 
    background-color:#000000; 
    } 

#topnav li li a:hover{ 
    color:#FFFFFF; 
    background-color:#059BD8; 
    } 

#topnav li ul{ 
    background:#FFFFFF; 
    z-index:9999; 
    position:absolute; 
    left:-999em; 
    height:auto; 
    width:170px; 
    border-left:1px solid #FFFFFF; 
    border-bottom:1px solid #FFFFFF; 
    } 

#topnav li ul a{width:140px;} 

#topnav li ul ul{margin:-32px 0 0 0;} 

#topnav li:hover ul ul{left:-999em;} 

#topnav li:hover ul, #topnav li li:hover ul{left:auto;} 

#topnav li:hover{position:static;} 

#topnav li.last a{margin-right:0;} 

/* ----------------------------------------------Column Navigation-------------------------------------*/ 

#column .subnav{display:block; width:250px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;} 

#column .subnav h2{ 
    margin:0 0 20px 0; 
    padding:0 0 14px 0; 
    font-size:20px; 
    font-weight:normal; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    color:#666666; 
    background-color:#F9F9F9; 
    line-height:normal; 
    border-bottom:1px dotted #666666; 
} 

#column .subnav ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    } 

#column .subnav li{ 
    margin:0 0 3px 0; 
    padding:0; 
    } 

#column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;} 

#column .subnav a{ 
    display:block; 
    margin:0; 
    padding:5px 10px 5px 20px; 
    color:#777777; 
    background:url("../images/blue_file.gif") no-repeat 10px center #F9F9F9; 
    text-decoration:none; 
    border-bottom:1px dotted #666666; 
    } 

#column .subnav a:hover{color:#059BD8; background-color:#F9F9F9;} 

#column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url("../images/black_file.gif") no-repeat #F9F9F9;} 
#column .subnav ul ul a{padding-left:40px; background-position:30px center;} 
#column .subnav ul ul ul a{padding-left:50px; background-position:40px center;} 
#column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;} 
#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;} 

的jsfiddle鏈接：http://jsfiddle.net/98TRb/

Answer 1

嘗試增加給你的CSS：

#topnav ul ul li:hover ul {left:170px} 

看到它在行動：http://jsfiddle.net/98TRb/1/

Answer 2

#topnav li ul ul li {display:inline-block; margin-left:40px; background-position:40px; text-align:center; border: 1px red solid; background-color: silver;} 

隨便對這個實驗。我改變了顏色，所以它會突出給你。