0

質問があります。HTML と CSS で簡単なドロップダウン メニュー プログラムを作成しました。ブラウザーを縮小すると、ナビゲーション メニュー項目 (リスト) がラップされます (次の行に移動します)。どうすれば回避できますか？これはコードです：

<style>


#coolMenu,
#coolMenu ul {
    list-style: none;
}
#coolMenu {
    float: left;
}
#coolMenu > li {
    float: left;
}
#coolMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#coolMenu ul li a {
    width: 80px;
}
#coolMenu li:hover ul {
    display: block;
}


/* Main menu
------------------------------------------*/
#coolMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#coolMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}

/* Submenu
------------------------------------------*/
#coolMenu ul {
    background: #f09d28;
}
#coolMenu ul li a {
    color: #000;
}
#coolMenu ul li:hover a {
    background: #ffc97c;
}



</style>



<ul id="coolMenu">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Mauricii</a></li>
    <li>
        <a href="#">Periher</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">Tyrio</a></li>
    <li><a href="#">Quicumque</a></li>
</ul>

ありがとう。

アイザック

4

3 に答える 3

0

width: [pixels here]のスタイルに追加するだけです#coolMenu。必要な幅に設定して、メニューが常に 1 行で表示されるようにします。min-width:レイアウトの残りの部分に応じて使用することもできます。

于 2013-04-15T20:07:57.680 に答える
0

追加するだけmin-widthです：

#coolMenu {
    float: left;
    min-width: 450px;
}

作業フィドルを参照してください：Min-Width Menu

于 2013-04-15T20:12:44.970 に答える