2

順序付けられていないリストのサブメニューを水平にしようとしています。私は次のような多くのことを試しました：

フロート: 左表示: インライン

これらは、同様の問題に直面している人々に他の場所で推奨されているようです. ただし、「サブメニューボタン」にカーソルを合わせると、サブメニューを水平にすることができません。

おわかりのように、これはウェブサイトのメイン ナビゲーション メニューを形成するためのものです。

私のHTMLコードはここにあります：

    <ul id="menu" >
    <li><a href="#">Home</a></li>
    <li class="sub">
    <a href="#">Sub Menu Button</a>
    <ul>
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    </ul>
    </li>
    <li><a href="#">Button 5</a></li>
    <li><a href="#">Button 6</a></li>
    <li><a href="#">Button 7</a></li>
    </ul>

私のCSSコードはここにあります：

    #menu {
    margin: 0;
    padding: 0.15%;
    background: #201f5f;
    height: 3em;
    list-style: none;
    font-family:arial;
    }

    #menu > li {
    height: 100%;
    margin-right: 0.5em;
    padding: 0 1em;
    background:#201f5f;
    }

    #menu > li > a {
    height: 3em;
    color: #ffffff;
    text-decoration: none;
    line-height: 3;
    font-weight: bold;
    text-transform: uppercase;
    }

    #menu > li > a:hover {
    color: #41A044;
    text-decoration: underline;
    }

    #menu > li.sub {
    position: relative;
    }

    #menu > li.sub ul {
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    background: #000000;
    position: absolute;
    top: -1000em;
    }

    #menu > li.sub ul li {
    width: 90%;
    margin: 0 auto 0.3em auto;
    }

    #menu > li.sub ul li a {
    height: 100%;
    display: inline;
    float: left;
    padding: 0.4em;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }

    #menu > li.sub ul li a:hover {
    background: #41A044;
    text-decoration: underline;
    }

    #menu > li.sub:hover ul {
    top: 3em;
    }

    #menu{
    text-align:center;
    }

    li{
    display:inline-block;
    }

私はHTMLとCSSの両方に非常に慣れていないので、コードが混乱している場合は申し訳ありませんが、サブメニューを垂直ではなく水平にしたいと言ったのと同じように機能します.

どんな助けでも大歓迎です。

4

2 に答える 2

2

CSS を次のように更新し、固定幅でレイアウトをより適切に制御できるようにします。

ここで実行されたことを確認してください: http://jsfiddle.net/ShADm/6/

#menu {
    margin: 0;
    padding: 0.15%;
    background: #201f5f;
    height: 3em;
    list-style: none;
    font-family:arial;
    width: 800px;
    }

    #menu > li {
    height: 100%;
    margin-right: 0.5em;
    padding: 0 1em;
    background:#201f5f;
    }

    #menu > li > a {
    height: 3em;
    color: #ffffff;
    text-decoration: none;
    line-height: 3;
    font-weight: bold;
    text-transform: uppercase;
    }

    #menu > li > a:hover {
    color: #41A044;
    text-decoration: underline;
    }

    #menu > li.sub {
    position: relative;
    }

    #menu > li.sub ul {
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    background: #000000;
    position: absolute;
    top: -1000em;
    left: -160px;
    width: 803px;
    }


    #menu li.sub ul li a {
    height: 100%;
    display: inline;
    float: left;
    padding: 0.4em;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }

    #menu > li.sub ul li a:hover {
    background: #41A044;
    text-decoration: underline;
    }

    #menu > li.sub:hover ul {
    top: 3em;
    }

    #menu{
    text-align:center;
    }

    li{
    display:inline-block;
    }

影響は次のとおりです。http://jsfiddle.net/ShADm/6/

于 2013-04-22T21:15:30.290 に答える
0 
#menu li>ul{

position:absolute;
visibility:hidden;
}

#menu li:hover>ul{

position:relative;
visibility:visible;
}

その内側のリストを脇に出すには、<ul>ネストされた内に出る必要があります。リスト項目ではなく、<li>結果に影響を与えようとしています。<ul>

最近、カテゴリのリストを無限にネストできるメニューを作成し、基本的に次のようにメニューを作成しました。

<ul class="menu">
<ul id="menu">
    <li class="menu_side"><a href="" name="categories">Categories</a>
        <ul>
            <li class="menu_down"><a href="" name="new">New</a>
                <ul>
                    <li><a href="" name="abc">Abc</a></li>
                </ul>
            </li>
        </ul>
    </li>
 </ul>
</ul>

私が設定した方法は、親内のカテゴリがカテゴリの配列である場合は横に移動し、そうでない場合は下に移動することです。これは、メニューのリストを生成するために使用するコードに組み込まれています。先ほど言ったように、ディレクトリ ツリーのように、カテゴリのリスト内に無限にネストされたリストを持つ可能性があります。このシステムで 5,000 を超える既製のカテゴリを投げましたが、ダウンさせた後は問題なく動作しました。

ul#menu li ul{

    visibility:hidden;
    position:absolute;
    opacity:0;
    box-shadow:0px 0px 2px #000;
    background-color:#004080;
    padding:0;
    }

ul#menu .menu_side ul{

    visibility:hidden;
    opacity:0;
    position:absolute;
    left:0%;
    top:-25px;
    }
ul#menu .menu_side:hover>ul{

    visibility:visible;
    opacity:1;
    position:relative;
    left:100%;
    top:-25px;
    z-index:1;
    }

ul#menu .menu_down ul{

    visibility:hidden;
    opacity:0;
    position:absolute;
    top:0%;

    }


ul#menu .menu_down:hover>ul{

    visibility:visible;
    opacity:1;
    position:relative;
    z-index:1;
    background-color:#6666ff;
    }
ul#menu .menu_side:hover{
    height:25px;
}

これは最も効率的な方法ではないかもしれませんが、私にとってはこれで十分です。

于 2013-04-22T21:32:33.520 に答える