垂直菜单不正确的格式

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这样的例子开始可能会更容易一些。