0

サブナビゲーションのメニュー項目が重なって表示される

コードは次のとおりです。

/* NAVIGATION */ .nav-bar {width: 100%; height: 80px; background-image:url(../images/bg-menu80.jpg);}

.nav-hold {overflow: hidden;}

.nav-list {float: right;}

.nav-list li {float: left; width: auto; position: relative;}

.nav-list li a {text-decoration: none; display:block; padding: 30px 7px 20px 7px; color: #f9f9f9; font-size: .9em; font-weight: bold;}

.nav-list li ul {display: none;}

.nav-list li a:hover {text-decoration: none; display: block; padding: 30px 7px 20px 7px; color: #000; font-size: .9em; font-weight: bold; background-color: #e7e4e4;}

.nav-list li a:hover li{display: block; position: absolute; margin: 0; padding: 0;}

.nav-list li a:hover li{float: left;}

.nav-list li:hover li a{ background-color: #333; border-bottom: 1px solid #fff; color: #FFF;}

<ul class="nav-list" id="navigation"><!--Menu list-->
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li> <ul><a href="members.html">Members</a>
<li><a href="board.html">Board of Directors</a></li>
<li><a href="committee.html">Committee</a></li>
</ul></li> <li><a href="join.html">Join Us</a></li> <li><a href="events.html">Events</a></li>
<li><a href="rules.html">Rules &amp; Guidelines</a></li> <li><a href="archive.html">Archive</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="#">Login</a></li> </ul><!--ENDS Menu list-->
4

1 に答える 1

1

コードを jsfiddle (「モックアップ」して HTML、CSS、および JS をテストするために使用される Web サイト) に直接コピーすると、コードは実際にはあまり機能しません。ここでいくつかの推測作業が行われる予定です...

ここには2つの問題があると思います。

HTML

まず、内部に<li>サブナビゲーション<ul>がある には、間違った html があります。はの内側ではなく、<a href="members.html">Members</a>の前にある必要があります。<ul>

したがって、次のようになります。

<li>
    <a href="members.html">Members</a>
    <ul>
        <li><a href="board.html">Board of Directors</a>
        </li>
        <li><a href="committee.html">Committee</a>
        </li>
    </ul>
</li>

CSS

次に、タグにカーソルを合わせたときにサブナビゲーション<ul>(デフォルトではこれは display: none)を表示しようとしていますが、サブナビゲーションを含む要素であるため、 にカーソルを合わせたときに表示<a>する必要があります。<li><ul>

したがって、次のようになります。

.nav-list li ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
}
.nav-list li:hover ul {
    display: block;
}

これが私の微調整のフィドルです。うまくいけば、軌道に戻るでしょう。

http://jsfiddle.net/davidpauljunior/ve9Ub/

于 2013-10-30T04:46:52.300 に答える