1

スタック オーバーフローに参加したばかりで、誰かが水平メニューの解決策を見つけるのを手伝ってくれることを願っています。私のサブメニューは、親の div の上に表示するのではなく、親の div を拡張しているようです。これが私のコードです。

HTML コード:

<div id="menu">
            <ul>
                <li><a id="" class="" href="">Home</a></li>
                <li><a id="" class="" href="">About Me</a>
                    <ul class="sub-menu">
                        <li><a href="">Biography</a></li>
                        <li><a href="">Photo Galery</a></li>
                        <li><a href="">Foot Print</a></li>
                    </ul>
                </li>
                <li><a id="" class="" href="">Expertise</a></li>
                <li><a id="" class="" href="">Projects</a>
                    <ul class="sub-menu">
                        <li><a href="">Geo 228 Portal</a></li>
                        <li><a href="">NEP Application</a></li>
                        <li><a href="">Geo Address Book</a></li>
                        <li><a href="">Assets Management</a></li>
                    </ul>
                </li>
                <li><a id="" class="" href="">Contact</a></li>
            </ul>
        </div>

CSS コード:

#menu {
    position: relative;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    background-color: #666666;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    overflow: hidden;
    z-index: 2;
}


#menu ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;
}

#menu li {
    display: block;
    width: 120px;
    float: left;
    border-right: 1px solid #999;
    z-index: 4;
}

#menu a {
    color: #ffffff;
    font-weight: bold;
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0;
    padding: 10px 20px;
}

#menu a:hover {
    color: #000000;
    margin: 5px 10px;
    padding: 5px 10px;
    background-color: #C0C0C0;
    border-radius: 10px;
}

#menu ul.sub-menu {
    display: none;
    position: relative;
}

#menu ul.sub-menu li {
    width: 200px;
    background-color: #C0C0C0;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #666666;
}

#menu ul.sub-menu li a {
    color: #000;
    text-align: center;
    margin: 5px 10px;
    padding: 5px 10px;
}

#menu ul.sub-menu li a:hover {
    color: snow;
    background-color: #666666;
}

#menu li:hover ul.sub-menu {
    display: block;
    z-index: 90;
}

ありがとうございました

4

1 に答える 1

1

メニューdivに以下を追加しました

overflow: visible;
height: 35px;

あなたのJsFiddleを更新しました

于 2012-11-07T15:53:06.573 に答える