vertical menu in css not formatting correctly

I am trying to show the menu as follows

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

The problem is that my menu is showing like this

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

and also.. how can I set the width of it to be consistent?, right now it takes only the length of the word inside of |HOME| but i would like to set this to a fix number.. I am new to css please help

.#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&g开发者_如何学运维t;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;
}

HERE IS THE 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>

Try:

1. Remove float: left from div#tabshor>ul>li
2. Remove float: left from #tabshor a
3. Add width: 170px; to div#tabshor>ul>li>a

Cleaning up your CSS might lead to less headaches. Also starting with an example like this vertical rollover list or this nested vertical rollover list might be easier.