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。实际上它还没有被广泛支持，所以你应该避免它。你可以做几件事：

使内部<li>显示内联：不漂亮但非常简单。如果您在内部width上放置了<ul>，它们会弹出一个框，看起来有点混乱但可用。
切换到智能<select>： Select2非常适合这一点。添加“GO”按钮，整个过程将占用更少的空间而不会难以使用。这将需要javascript，但您只需要一行。

您也可以手动将列表拆分为多个单独的子列表，并使用浮动的div对它们进行排列，但这样做很费劲，而且比它的价值更麻烦。您还可以阅读this（“如何构建Kick-Butt CSS3 Mega下拉菜单”），但我认为这比您需要或想要的更多。

Answer 2

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

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

浏览器自然会在容器中布置列表项，因此了解容器的宽度，您可以重新排序列表项以正确显示所需的列。

编辑：有点非常hacky，但如果子菜单中的列表项的宽度和数量是已知且已修复（或至少不更改）你可以使用CSS定位来创建伪列，例如在this demo

中

Answer 3

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

添加到您的CSS底部

ul{width:200px;}

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

你可以从那里试验..

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

3 个答案: