需要更改列表项，以便它们不直接进入页面？

Question

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="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</a></li> 
     <li><a href="">Juddamania</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> 
</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: 400px; 
    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; 
     height: auto;         
     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; 
} 

我遇到的问题是，当悬停在项列表项走得太远了网页。有没有办法将他们分成两排或三排，然后并排？只有新的HTML和CSS和不能自己工作。在此先感谢

Answer 1

一个很好的出发点是调整UL标签的宽度

添加到您的CSS

ul{width:200px;} 

退房此工作示例的底部http://jsfiddle.net/Sj6Am/1

，你可以从那里实验..

Answer 2

将宽度添加到子菜单将使列表项更多的水平空间使用。

.navbar li ul { 
    display: none; 
    height: auto;         
    margin: 0; 
    padding: 0; 
    width:200px; /* for example */ 
} 

浏览器将自然奠定了整个容器的列表中的项目，所以知道容器有多宽，你可以重新排序列表项正确地显示你想要的列。

编辑：这是 有点 非常哈克，但如果在子菜单的宽度和列表项的数目是已知的，固定的（或至少不发生大的变化），你可以使用CSS定位来创建伪列，例如在this demo

Answer 3

请将您的代码放在jsFiddle或其他东西中，这很清楚您要做什么。根据你的代码，它看起来像你做了一个CSS下拉菜单，但你有太多的东西。

技术上CSS3 supports multi-column layouts。实际上它还没有得到广泛的支持，所以你应该避免它。有几件事情可以做：

1. 使内<li>的显示屏内嵌：不漂亮，但很容易。如果你在内部<ul>上放置width，它们会弹出一个盒子，看起来有点杂乱但可用。

2. 切换到智能<select>：Select2很适合这个。添加“GO”按钮，整个事情将占用更少的空间，而不会很难使用。这将需要JavaScript，但只是你的一部分。

你也可以手动分割清单分成几个独立的子列表，并使用浮动的div阵列他们，但这是挑剔和更多的麻烦比它的价值。您还可以阅读this（“如何构建一个反对CSS3超级下拉菜单”），但我认为这超出了您的需要或想要的范围。