html - 需要更改列表项以使其不直接进入页面下方？

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;
}

我遇到的问题是，当将鼠标悬停在项目上时，列表项目在页面下方太远了。有没有办法我可以把它们分成 2 或 3 行，这样它们就可以并排了？只是 html 和 css 的新手，自己无法解决。提前致谢

Answer 1

请将您的代码放在jsFiddle或其他东西中，以便清楚您要做什么。根据您的代码，您似乎已经制作了一个 CSS 下拉菜单，但里面的东西太多了。

从技术上讲，CSS3支持多列布局。实际上，它尚未得到广泛支持，因此您应该避免使用它。您可以做几件事：

1. 使内部<li>s 内联显示：不漂亮但很容易。如果你然后在里面放一个width，<ul>它们会弹出一个盒子，看起来有点杂乱但可以使用。

2. 切换到智能<select>： Select2非常适合这个。添加“GO”按钮，整个东西会占用更少的空间而不难使用。这将需要 javascript，但您只需一行。

您还可以手动将列表拆分为几个单独的子列表并使用浮动 div 将它们排列起来，但这很挑剔，而且比它的价值更麻烦。您也可以阅读这篇文章（“如何构建 Kick-Butt CSS3 Mega 下拉菜单”），但我认为这超出了您的需要或想要的范围。

Answer 2

向子菜单添加宽度将为列表项提供更多的水平空间以供使用。

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

浏览器自然会在容器中排列列表项，因此知道容器的宽度后，您可以重新排列列表项以正确显示所需的列。

编辑：这有点hacky，但是如果子菜单中的列表项的宽度和数量是已知的并且是固定的（或者至少没有太大变化），您可以使用 CSS 定位来创建伪列，例如在这个演示中

Answer 3

一个好的起点是调整 ul 标签的宽度

添加到 CSS 的底部

ul{width:200px;}

查看这个工作示例http://jsfiddle.net/Sj6Am/1

你可以从那里进行实验..