2

ドロップダウンメニューを作るのはこれが初めてです。ドロップダウン メニューの動作がおかしい理由がわかりません。サブメニューを非表示にして、ホバーすると表示されるようにしたかっただけです。

問題は、ホバリングすると、ナビゲーションが半分に壊れることです。理解できません。ここにそれを示すjsfiddleがあり、これが私のHTMLとCSS navコードです:

HTML:

<ul id="nav">
    <li><a style="background-color:#000000;color:#FFFE41;text-decoration:none;font-weight:bold;" href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="history.html">Camera Phone</a></li>
    <li><a href="focus.html">Manual & Auto Focus</a></li>
    <li><a href="exposure.html">Exposure</a>
        <ul>
            <li><a href="iso.html">ISO</a></li>
            <li><a href="aperture.html">Aperture</a></li>
            <li><a href="shutterspeed.html">Shutter Speed</a></li>
        </ul>
    </li>
    <li><a href="whitebalance.html">White Balance</a></li>
    <li><a href="lowlight.html">Low Light</a></li>
    <li><a href="epilogue.html">Epilogue</a></li>
</ul>

CSS:

ul#nav {
    margin-top: -9px;
    /*put nav in the upper-top browser*/
    list-style-type: none;
    /*gets rid of bullets*/
    padding: 0;
    text-align:center;
}
#nav li {
    margin: 0;
    display: inline;
    /*display list horizontally*/
    margin-left: -4px;
    /*dense the links together*/
}
#nav a {
    display: inline-block;
    /*don't break onto new lines and follow padding accordingly*/
    padding:10px;
    /*give space between links*/
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
}
#nav li > ul {
    display:none;
    /*hide the sub-nav menus*/
}
#nav li:hover > ul {
    /*display sub menus when hovered over*/
    display:block;
    position:relative;
    width:10%;
    left:61%;
    /*pushes the nav right under where the menu is*/
}
4

1 に答える 1

4

あなたのHTMLはかなりきれいに見えます（インラインスタイルを除いて - 可能な限り避けてください！）

ドロップダウン ナビゲーションを機能させるための解決策は、十分な回数実行すれば、驚くほど簡単です。

まず、親の li は次のようにする必要がありますposition: relative。

#nav li{
    margin: 0;
    display: inline; /*display list horizontally*/
    margin-left: -4px; /*dense the links together*/
    position: relative;
}

次に、子 nav を にする必要がposition: absoluteあり、上/左を親 li 内に配置する必要があります。ちなみに、ベース要素の「Reveal」以外のすべてをスタイリングしてから、ホバーの「Reveal」だけをスタイリングすることをお勧めします。

#nav li > ul {
    display:block;
    position:absolute;
    width: 200px; /* Adjust as needed.  10% is now 10% of the parent li, so not enough */
    height: auto;
    left: -999em; /* this hides the menu when not hovered */
    top: 40px; /* adjust to match the height of the parent li */
}

#nav li:hover > ul{
   left: 0; /* show the menu when hovered */
}

最後に、ナビゲーションに関しては、display:inline-blockパディングなどを適切に適用できるように、ナビゲーション要素にインラインではなく使用するのが好きです。そうする場合は、IE7 ハックを使用することを忘れないでください (サポートする予定がある場合)。 IE7)。

于 2013-10-04T21:59:31.960 に答える