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

下面是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>

---

我遇到的问题是，当将鼠标悬停在列表项上时，列表项在页面下方的位置过远。有没有办法把它们分成两行或三行，让它们并排排列？只是对html和css比较陌生，我自己也做不出来。提前感谢

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

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

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

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

中，请输入代码或其他东西，以便清楚地知道您要做什么。根据你的代码，看起来你已经制作了一个CSS下拉菜单，但是里面的东西太多了

技术上是CSS3。实际上，它还没有得到广泛的支持，所以你应该避免使用它。您可以做以下几件事：

使内部

内联显示：不漂亮，但非常简单。如果你在内部的

上放置一个

宽度

，它们会弹出一个框，看起来有点杂乱无章，但可以使用

切换到智能

：非常适合。加上“GO”按钮，整个东西将占用更少的空间，而不会很难使用。这将需要javascript，但您只需要一行代码

---

您还可以手动将列表拆分为几个单独的子列表，并使用浮动div对它们进行数组排列，但这样做很挑剔，而且麻烦太多。您也可以阅读（“如何构建踢屁股CSS3巨型下拉菜单”），但我认为这比您需要或想要的更多

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

添加到css的底部

ul{width:200px;}

看看这个工作示例

---

您可以从那里进行实验。

如果不希望子菜单项水平排列，可以使用CSS定位来伪造列。请参阅我编辑的答案以获取演示。

ul{width:200px;}