列表项在导航栏中没有坐在很好

Question

下面是链接到工作导航栏

我遇到的问题是他们不坐在下面对方像其他列表项列表项的球队。我知道它，因为有些球队的名字是2条& 3线林不知道如何设置，以便他们坐在下面对方没有所有的空间

JS Fiddle

HTML

<div id="wrap"> 


<ul class="navbar"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Franchises</a> 
     <ul> 
     <li><a href="">elroyz Xpress</a></li> 
     <li><a href="">Skye Stickbeetles</a></li> 
     <li><a href="">Hortons Heroes</a></li> 
     <li><a href="">The Predators</a></li> 
     <li><a href=""> The Greater Western Sandhurst Storm</a></li> 
     <li><a href="">Stockyzladz</a></li> 
     <li><a href="">General Soreness</a></li> 
     <li><a href="">Wild Things</a></li> 
     <li><a href="">The Bombsquad</a></li> 
     <li><a href="">Chubby Chaser</a></li> 
     <li><a href="">Soup-A-Stars</a></li> 
     <li><a href="">StayClassy FC</a></li> 
     <li><a href="">The Peptides</a></li> 
     <li><a href="">Untouchable Saints</a></li> 
     <li><a href=""> Langy All Blacks</a></li> 
     <li><a href="">McQueenMachine</a></li> 
     </ul> 
     </li> 
     <li><a href="">Fixtures</a> 
     <ul> 
     <li><a href="">Round 1</a></li> 
     <li><a href="">Round 2</a></li> 
     <li><a href="">Round 3</a></li> 
     <li><a href="">Round 4</a></li> 
     <li><a href="">Round 5</a></li> 
     <li><a href="">Round 6</a></li> 
     <li><a href="">Round 7</a></li> 
     <li><a href="">Round 8</a></li> 
     <li><a href="">Round 9</a></li> 
     <li><a href="">Round 10</a></li> 
     <li><a href="">Round 14</a></li> 
     <li><a href="">Round 15</a></li> 
     <li><a href="">Round 16</a></li> 
     <li><a href="">Round 17</a></li> 
     <li><a href="">Round 18</a></li> 
     <li><a href="">Round 19</a></li> 
     <li><a href="">Round 20</a></li> 
     <li><a href="">Round 21</a></li> 
     <li><a href="">Round 22</a></li> 
     <li><a href="">Round 23</a></li> 
     </ul> 
     </li> 
     <li><a href="">Free Agents</a> 
     <ul> 
     <li><a href="">Adelaide</a></li> 
     <li><a href="">Brisbane</a></li> 
     <li><a href="">Carlton</a></li> 
     <li><a href="">Collingwood</a></li> 
     <li><a href="">Essendon</a></li> 
     <li><a href="">Fremantle</a></li> 
     <li><a href="">Geelong</a></li> 
     <li><a href="">Gold Coast</a></li> 
     <li><a href="">GWS</a></li> 
     <li><a href="">Hawthorn</a></li> 
     <li><a href="">Melbourne</a></li> 
     <li><a href="">North Melbourne</a></li> 
     <li><a href="">Port Adelaide</a></li> 
     <li><a href="">Richmond</a></li> 
     <li><a href="">St Kilda</a></li> 
     <li><a href="">Sydney</a></li> 
     <li><a href="">West Coast</a></li> 
     <li><a href="">Western Bulldogs</a></li> 
     </ul> 
     </li> 

     <li> <a href="#">De-Listings</a></li> 
</ul> 
</div> 

CSS

#wrap { 
    width:100%; 
    height: 28px; 
    margin: 0; 
    z-index:99; 
    background-color:#F00; 
    text-align:left;} 

.navbar { 

    padding:0; 
    height: 25px; 
    margin: 0 auto; 
    width: 500px; 
    border-right: 1px solid #1c1c1c; 
    border-left: 1px solid #1c1c1c; 
} 

    .navbar li { 
      width: 100px; 
      float: left; 
      text-align: center; 
      list-style: none; 
    font: normal bold 11px Arial, Verdana, Helvetica; 
      padding: 0; 
      margin: 0; 
      background-color: #F00 
         } 

.navbar a {       
     padding: 7px 0; 
     border-left: 1px solid #1c1c1c; 
     border-right: 1px solid #1c1c1c; 
     text-decoration: none; 
     color: white; 
     display: block; 


     } 

.navbar li:hover, a:hover { 
    background-color: #900; 
} 

.navbar li ul { 
     display: none; 
     width: 300px;         
     margin: 0; 
     padding: 0;    
     }    

.navbar li:hover ul  { 
         display: block; 
         } 

.navbar li ul li {background-color: #a4a4a4; 
} 

.navbar li ul li a { 
     border-left: 1px solid #1c1c1c; 
     border-right: 1px solid #1c1c1c; 
     border-top: 1px solid #1c1c1c; 
     border-bottom: 1px solid #1c1c1c; 
     } 

.navbar li ul li a:hover {background-color: #1c1c1c; 
} 

Answer 1

只需添加height:35px;到.navbar li ul li a

Answer 2

这个属性clear:left加入.navbar li ul li

像这样：

.navbar li ul li { 
    background-color: #a4a4a4; 
    clear:left; 
} 

结果：http://jsfiddle.net/SsNXR/2/