1

水平サブメニューを持つ水平メニューを作成しました。最初のサブメニューと同じように、すべてのサブメニューを左にプッシュしたいのですが。どうやってやるの？私はCSSに非常に（非常に）慣れていません。

私はこのHTMLコードを持っています:

<div id="menu">
        <ul>
            <li><a href="#nogo">Link 1</a>
                <ul>
                    <li><a href="#nogo">Link 1-1</a></li>
                    <li><a href="#nogo">Link 1-2</a></li>
                    <li><a href="#nogo">Link 1-3</a></li>
                </ul>
            </li>
            <li><a href="#nogo">Link 2</a>
                <ul>
                    <li><a href="#nogo">Link 2-1</a></li>
                    <li><a href="#nogo">Link 2-2</a></li>
                    <li><a href="#nogo">Link 2-3</a></li>
                </ul>
            </li>
            <li><a href="#nogo">Link 3</a>
                <ul>
                    <li><a href="#nogo">Link 3-1</a></li>
                    <li><a href="#nogo">Link 3-2</a></li>
                    <li><a href="#nogo">Link 3-3</a></li>
                </ul>
            </li>
        </ul>
    </div>

そして、私はこのCSSコードを持っています:

    #menu{
padding:0;
margin:0;
overflow:hidden;
height:60px;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}

#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}

#menu li a:hover{
background-color: red;
}

#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
width: 600px;
}

#menu ul li:hover ul{
visibility:visible;
display: inline;
}
4

2 に答える 2

1

position: relativeから削除して、代わり#menu liに追加し#menu ulます。また、に追加left: 0し#menu ul ulます：

#menu ul{
    padding:0;
    margin:0;
    position: relative;   /* add this */
}

#menu li{
    /* position: relative;   //remove this */
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}

#menu ul ul{
    position: absolute;
    left: 0;              /* add this */
    top: 30px;
    visibility: hidden;
    width: 600px;
}

実例： http： //jsfiddle.net/WJN4G/

于 2012-07-13T10:19:01.433 に答える
1

ポジショニングをから#menu liに移動し#menu ul、に追加left:0;します#menu ul ul

これleft:0;により、要素（#menu ul ul）は、それ以外の位置にある最初の親static（デフォルト）に揃えられます。そのため、position:relativeon要素を上に移動して#menu ul、すべての子ulを親の左端に揃える必要がありulます。

#menu ul{
padding:0;
margin:0;
position: relative; /* <- moved */
}
#menu li{
position: relative; /* <- deleted */
float: left;
list-style: none;
margin: 0;
padding:0;
}

#menu ul ul{
position: absolute;
    left:0;         /* <- added */
top: 30px;
visibility: hidden;
width: 600px;
}

これがあなたの修正されたフィドルです

于 2012-07-13T10:19:45.560 に答える