1

大学のウェブサイト用の縦型メニューバーを作成しようとしています。サブレベルリストの表示の実装に問題があります。私の現在のコードはかなり奇妙な結果を生み出します。どうすれば修正できますか？

HTMLコード：

    <div class="nav">
        <ul class="top-level">
            <li><a href="#">EME Alumni</a></li>
            <li>
                <a href="#">Alumni Reunion 2012</a>
                <ul class="sub-level">
                    <li><a href="#">RSVP</a></li>
                    <li><a href="#">Organizing Team</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Alumni Reunion 2012</a>
                <ul class="sub-level">
                    <li><a href="#">RSVP</a></li>
                    <li><a href="#">Organizing Team</a></li>
                </ul>
            </li>
        </ul>
    </div>​

CSSは次のとおりです。

     .nav {
margin: 3%;
width: 225px;
float: left;
}
.nav ul{list-style: none;margin:0;}
.nav a {
    float: left;
    list-style: none;
    display:block;
    text-decoration: none;
    font-size: 1.25em;
    color: #696969;
    padding: 10px;
    width: 225px;
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9),     to(#C0C0C0));
    }
    .nav a:hover {background: -webkit-gradient(linear, left top, left bottom,   from(#C0C0C0), to(#A9A9A9));}
    ul.sub-level {
        margin-left: 110%;
        display:none;
     } 
     li:hover .sub-level {
          display: block;
     }

</ p>

これがjsfiddleデモへのリンクです

4

1 に答える 1

4

サブメニューを絶対的に配置する必要があるため、その親を相対的に配置する必要があります。

.nav li {position:relative}

ul.sub-level { 
    display:none;
    position:absolute;
    left:250px;
    top:0;
}

A-tagをフロートする必要はありません。またposition:relative、子がないため、タグをオンにする必要もありません。

于 2012-12-03T21:14:07.387 に答える