垂直菜單不正確的格式

Question

我試圖顯示菜單如下

| HOME | 
| GAMES | 
| PLAYERS| 
|SCHEDULE| 

的問題是，我的菜單顯示這樣

| HOME || GAMES | 
|PLAYERS||SCHEDULE| 

，也..我怎麼能將它的寬度設置爲一致？，現在它只需要| HOME |中的單詞的長度但我想將它設置爲一個固定號碼。我是新來的css請幫助

.#tabshor { 
    width:100%; 
    font-size:50%; 
    line-height:5px; 
    } 

#tabshor ul { 
    margin:-30px; 
    padding:150px 0px 0px 0px; 
    line-height:10px; 
    } 

#tabshor li { 
    display:block; 
    margin:0; 
    padding:5; 
    } 

#tabshor a { 
    float:left; 
    background:url("../images/tableft.gif") no-repeat left top; 
    margin:0; 
    padding:0 0 0 3px; 
    text-decoration:none; 
    } 

#tabshor a span { 
    float:left; 
    display:block; 
    background:url("../images/tabright.gif") no-repeat right top; 
    padding:10px 20px 20px 10px; 
    color:#FFF; 
    } 

#tabshor a span {float:none;} 


#tabshor a:hover span { 
    color:#FFF; 
    } 

#tabshor a:hover{ 
    background-position:0% -42px; 
    } 

#tabshor a:hover span { 
    background-position:100% -42px; 
    } 

div#tabshor>ul>li { 
     display:block; 
     position:relative; 
     float:left; 
     list-style:none; 
     left:50px; 
    } 

div#tabshor>ul>li ul{ 
      position:absolute; display:none; 
      list-style:none; 
      left:100px;  
     } 

div#tabshor>ul>li>a{ 
      display:block; 
     } 

    div#tabshor>ul>li:hover ul{ 
     display:block; 
     z-index:500; 
     width:50%; 
     margin:10px 0px 0px -20px;  
     width:100%; 
     } 

div#tabshor ul li ul a{ 
    display:block; 
    width: 50px; 
} 

div#tabshor ul li a:hover{ 
    background:red; 
    font-style: oblique; 
} 

這裏是HTML

<div id="left_banner" class="divleftside"> 
    <div id="tabshor"> 
     <ul> 
      <li><a href="index.html"><span>HOME</span></a></li> 
      <li><a href="#"><span>GAMES</span></a></li> 
      <li><a href="#"><span>PLAYERS</span></a> 
       <ul> 
        <li><a href="PLAYEERS.html"><span>PLAYERS</span></a></li> 
        <li><a href="#"><span>SOCCER</span></a></li> 
        <li><a href="#"><span>BASKETBALL</span></a></li>    
       </ul> 
      </li> 
      <li><a href="#"><span>COURTS</span></a></li> 
      <li><a href="#"><span>REFEREES</span></a></li> 
      <li><a href="#"><span>ABOUT US</span></a></li> 
      <li><a href="#"><span>CONTACT US</span></a></li> 
      <li><a href="#"><span>REGISTER</span></a></li> 
     </ul> 
    </div> 
     </div> 

Answer 1

嘗試：

1. 從div#tabshor>ul>li刪除float: left
2. 刪除float: left來自#tabshor a
3. Add width: 170px; to div#tabshor>ul>li>a

清理CSS可能會導致更少的麻煩。也從this vertical rollover list或this nested vertical rollover list這樣的例子開始可能會更容易一些。