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 は初めてで、自分で解決することはできません。前もって感謝します

score 1 · Accepted Answer

コードをjsFiddleなどに入れて、何をしようとしているのかが明確になるようにしてください。コードに基づいて、CSS ドロップダウンメニューを作成したように見えますが、内容が多すぎます。

技術的には、CSS3は複数列のレイアウトをサポートしています。実際には、まだ広くサポートされていないため、おそらく避けるべきです。あなたができることがいくつかあります：

内側<li>の s ディスプレイをインラインにします。きれいではありませんが、非常に簡単です。widthインナー<ul>を着ると、箱の中に飛び出し、少しまとまりがなくなりますが、使えます。
スマートに切り替える<select>： Select2はこれに最適です。「GO」ボタンを追加すると、使いづらくなることなく全体が占めるスペースが少なくなります。これにはjavascriptが必要ですが、あなたの側では1行だけです。

リストをいくつかの個別のサブリストに手動で分割し、フローティング div を使用してそれらを配列することもできますが、それは面倒であり、価値があるよりも面倒です。これ(「Kick-Butt CSS3 Mega Drop-Down Menu を作成する方法」)を読むこともできますが、繰り返しになりますが、それは必要以上のものだと思います。

score 0 · Accepted Answer

サブメニューに幅を追加すると、リスト項目が使用できる水平方向のスペースが増えます。

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

ブラウザーはコンテナー全体にリスト項目を自然にレイアウトするため、コンテナーの幅を知っていれば、リスト項目を並べ替えて、必要な列を正しく表示できます。

編集:~~ちょっと~~ハックですが、サブメニューのリスト項目の幅と数がわかっていて、固定されている (または少なくともあまり変わらない) 場合は、CSS の配置を使用して疑似列を作成できます。たとえば、このデモ

score 0 · Accepted Answer

良い出発点は、ul タグの幅を調整することです。

CSSの一番下に追加

ul{width:200px;}

この実例をチェックしてくださいhttp://jsfiddle.net/Sj6Am/1

そこから実験できます..

html - ページのすぐ下に移動しないようにリスト項目を変更する必要がありますか?

3 に答える 3

Related

Reference