0

ドロップダウン メニューを作成しようとしていますが、親リンクの下の中央にあるドロップダウン メニューを表示しようとして立ち往生しています。

ドロップダウンボックスの中央を、トップ要素/親要素/ドロップダウンメニューの上のリンクの中央と同じにすることを検討しています。

私が得た最良の方法は、CSS マージンを使用して中心を推定することですが、それは悪い考えのようです。

CSS ソリューションは jQuery ソリューションよりも優れているかもしれませんが、どちらかを検討します。

これは私のヘッダーナビゲーションメニューです:

<style>
    #nav li ul { margin:70px 0 0 -75px; width: 200px; position: absolute; z-index:99; }
</style>

<ul id="nav">
    <li><a href="#" class="mitem mhome" title="">home</a></li>
    <li><a href="#" class="mitem mshop" title="">shop</a>
        <ul class="child">
            <li class="mheader"></li>
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a></li>
            <li><a href="#">Random Equipment</a></li>
        </ul>            
    </li>
    <li><a href="#" class="mitem mdespre" title="">despre noi</a>
        <ul class="child">
            <li class="mheader"></li>
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a></li>
            <li><a href="#">Random Equipment</a></li>
        </ul>             
    </li>

4

1 に答える 1

0

プライマリ リンクにカーソルを合わせると表示されるセカンダリ リンクを含む水平メニューを作成しようとしているようです。

基本的な例として、次の CSS から始めることができます。

#nav > li {
    border: 1px solid gray;
    width: 200px;
    list-style: none;
    margin: 0;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
}
#nav > li > a {
    display: block;
    background-color: lightgray;
    padding: 10px;
}
#nav > li > ul {
    display: none;
}
#nav > li:hover > ul {
    display: block;
}

プライマリ リンクにマウスを合わせると、セカンダリ メニューが表示されます。

デモはhttp://jsfiddle.net/audetwebdesign/BrL3G/で見ることができます。

スタイリングには多くの細かい調整を行うことができますが、少なくとも基本的な概念を示すものはあります。

于 2013-08-21T00:35:41.060 に答える