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 supports multi-column layouts .实际上，它还没有得到广泛支持，所以你应该避免使用它。您可以做几件事:

1. 制作内部<li> s 显示内联: 不漂亮但很容易。如果你再放一个width在内<ul>它们会弹出一个盒子，看起来有点杂乱无章但很有用。

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

您也可以手动将列表拆分为几个单独的子列表，并使用 float div 对它们进行排列，但这很挑剔，而且麻烦多于它的值(value)。您还可以阅读 this (“How to Build a Kick-Butt CSS3 Mega Drop-Down Menu”)，但同样，我认为这比您需要或想要的要多。