-1

wordpress の header.php テーマ ファイルにメニューを手動で追加しました。単一の ul を使用するとすべてがうまく見えますが、WP のサブメニュー機能を使用して単一のメニュー リンクの下に移動項目を追加すると、奇妙な結果が得られます。ここで見ることができます。 結果

私が探している結果は、サブメニュー項目のみを表示する :hover 効果を追加することですが、最初に項目が右側の li 項目の下に表示される必要があります (Jobs -> Job Seekers & Job Offers)。

予期しない 521 ピクセルのサブメニュー幅が表示されるのはなぜですか? また、どうすれば苦境を解決できますか?

<li id="menu-item-103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-103"><a href="http://ldpolishing.com/_dev/jobs/job-offers/">Jobs</a>
<ul class="sub-menu">
    <li id="menu-item-101" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-101"><a href="http://ldpolishing.com/_dev/jobs/job-seekers/">Job Seekers</a></li>
    <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102"><a href="http://ldpolishing.com/_dev/jobs/job-offers/">Job Offers</a></li>
</ul>
</li>

ページへのリンク ありがとう

4

2 に答える 2

1

原理は簡単です。親<li>タグに をposition: relative;設定して.sub-menuからposition: absolute;、 を に設定し、 に設定してleft: 0;、 の左側に並べることができます<li>。

次に、サブメニューを非表示にして、li にカーソルを合わせると表示できます。

この CSS を試してください:

#top .menu li {
   position: relative;
}

#top .menu .sub-menu {
   display: none;
   position: absolute;
   left:0;
   text-align: left;
   margin:0;
   width: 150px;
}

#top .menu .sub-menu .li {
   padding:0;
}

#top .menu li:hover > .sub-menu {
   display: block;
}
于 2013-04-12T15:52:02.667 に答える