1

サブメニュー付きのナビゲーションメニューを作成しようとしていますが、今日はそれをいじっています。しかし、親メニューのサブメニューを取得してリンクを整列させることに固執しています。

私のHTML

<!-- navigation menu -->
<div class="MenuContainer">
        <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li>
                        <a href="#">Projects</a>
                        <ul class="sub">
                                <li><a href="#">Project1</a></li>
                                <li><a href="#">Project2</a></li>
                                <li><a href="#">Project3</a></li>
                        </ul>
                </li>
        </ul>
</div>

私のCSS

.MenuContainer {
    width:100%;
    height:50px;
    border:1px solid;
    position:relative;
}

ul {
    margin:0;
    padding:0;
}

/*Main menu*/
li.menu {
    height:50px;
    float:left;
}

ul.menu li {
    list-style:none;
    float:left;
    height:49px;
    text-align:center;
}

ul.menu li a {
    display:block;
    padding:0 20px;
    text-align:center;
    font-size:17px;
    line-height:49px;
    text-decoration:none;
    color:#5d5d5d;
}

ul.menu li:hover > a {
    color:#fdfdfd;
}

ul.menu li:hover > ul {
    display:block;
}

/*sub menu*/
li.sub {
    height:40px;
    float:left;
}

ul.sub li {
    list-style:none;
    float:left;
    height:39px;
    text-align:center;
}

ul.sub li a {
    display:block;
    padding:0 20px;
    text-align:center;
    font-size:17px;
    line-height:39px;
    text-decoration:none;
    color:#5d5d5d;
}

誰かが私が間違っていた場所を教えてくれたら教えてください。初めてゼロからの作成に挑戦。

また、誰かが良い HTML5 / CSS3 フォーラム / フォーラムを知っている場合は、遠慮なくリンクを投稿してください。私はいくつかを見つけようとしましたが、すべてが真剣ではないか、アクティブなユーザーではありません.

また、これはstackoverflowでの最初の投稿なので、ここで初心者の間違いを犯した場合は、それを指摘してください.

よろしくお願いします。

4

1 に答える 1

1

ねえ、私はあなたがこれをしたいと思うと思います 太陽のクラスposition relativeとサブULを与えるposition absolute 

.sub{
position:absolute;
}


ul.menu li {
    position:relative;
}

ライブデモ http://jsfiddle.net/HVk4G/

垂直メニュー 更新されたデモhttp://jsfiddle.net/HVk4G/1/

于 2012-06-26T10:17:10.603 に答える