CSS/Jquery 水平メニューを作成しようとしています。すべてのリスト項目にはリンクが含まれており、そのうちの 1 つには非表示の div が含まれており、対応するリンクにカーソルを合わせたときに表示される必要があります。
私が抱えている問題は、メニューのコンテナー div にある非表示の div の上にリンクが置かれている場合です。つまり、現在表示されている div の背景はメニューや他のスタイルと同じです。
私が望むのは、表示されるdivがメニューと同じdivの一部ではなく、対応するリンクの下に表示されることです。
私が見つけた例は、ヘッダー リンクのいずれかにカーソルを合わせると、 http://www.inprocorp.com/default.aspxです。
非表示の div のコンテンツには、画像、HTML リスト、段落などを含めることができます。
jsfiddler を使用しようとしましたが、現在ダウンしています。
コード：
HTML
<div id="centeredmenu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">services</a></li>
<li class="subMenu"><a href="#" id="prod">products</a>
<div class="hiddencontent">hidden content</li>
<li><a href="#">contact</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
JS
$('li.subMenu a').hover(function(evt)
{
var link = $(this);
var dialog = link.next('div');
dialog.css("top", link.position().top);
dialog.css("left", link.position().left);
dialog.css("position", "relative");
dialog.show();
},
function() {
$(this).next('div').hide();
})
ありがとう、アンドリュー