1

ilメインメニューの相対位置とそのul中の絶対位置を指定して、要素の下にサブメニューがあるメニューを作成しようとしています。ulサブメニューがtoを親ではなくコンテナとして扱うのはなぜliですか？

HTML：

<nav>
    <ul>
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Item 3</a></li>
        <li><a href="#">Menu Item 4</a></li>
        <li><a href="#">Menu Item 5</a></li>
    </ul>
</nav>​

CSS：

nav a {
    float: left;
    padding: 10px;
    border: solid 1px #C0C0C0;
    margin-left: -1px;
}

nav li {
    position: relative;
}

nav li ul {
    position: absolute;
}

http://jsfiddle.net/6pgHa/

4

2 に答える 2

2

左に浮かぶのはアンカータグであるため、li要素ではなく、位置を定義している可能性があります。

nav aセレクターをに変更するnav liと、修正されます。li要素は、現在のコードでは実際には位置付けられていません。

于 2012-11-22T14:37:14.340 に答える
1

私はあなたのフィドルを更新して、メニューがあなたが望むように機能するようにしました：http: //jsfiddle.net/6pgHa/3/

nav {
 width: 600px;
 margin: 50px auto 0;
}

nav > ul li {
 float: left;
 position: relative;
}

nav > ul li a {
 float: left;
 padding: 10px;
 border: solid 1px #C0C0C0;
 display:inline-block;
}


nav > ul li ul {
 position: absolute;
 top:50px;
 left:-9999px;
}

nav > ul li:hover ul {
 left:0;
}
于 2012-11-22T15:02:46.040 に答える