jquery と css を使用してメニュー コントロールを実装しているときに、次の問題が発生しました。
たとえば、「メニュー項目 1」にカーソルを合わせると、この項目のスタイルが変更され ( )、問題ありませんが、子 (サブ メニュー項目 1、サブ メニュー項目 2など)background: white;を横断したい場合は、メニュー項目 1を維持する必要があります。しかし、私の例ではうまくいきません。 background: white;
また、Menu Item 2にカーソルを合わせると、メニュー項目の以前のスタイル ( Menu Item 1 ) がデフォルトに変更されます。
これを解決する方法を知っている人はいますか？
リンク腐敗の場合のフィドルからのコードは次のとおりです。
HTML
<ul id="jsddm">
<li><a href="#">Menu Item 1</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
<li><a href="#">Sub Menu Item 5</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 4</a></li>
</ul>
脚本
var timeout = 200;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open() {
jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function jsddm_timer() {
closetimer = window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
$(document).ready(function() {
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
});
document.onclick = jsddm_close;
CSS
/* menu styles */
#jsddm
{
margin: 0;
padding: 0;
float: left;
background: #4370b6;
width: 100%;
}
#jsddm > li
{
float: left;
list-style: none;
font: 12px Tahoma, Arial;
background: #4370b6;
padding: 0 5px;
}
#jsddm > li a
{
display: block;
padding: 0 15px;
text-decoration: none;
color: #FFF;
white-space: nowrap;
height: 62px;
line-height: 60px;
}
#jsddm > li a:hover
{
background: #FFF;
color: #4370b6;
padding: 0 15px;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
box-shadow: 0 3px 5px rgba(0,0,0,17);
}
#jsddm li ul
{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#jsddm li ul li
{
float: none;
display: inline;
width: auto;
background: #0b0b0b;
color: #FFF;
}
#jsddm li ul li a
{
height: 40px;
min-width: 240px;
border-bottom: 1px solid #e9e9e9;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
box-shadow: 0 3px 5px rgba(0,0,0,17);
background: #FFF;
color: #0b0b0b;
text-align: left;
line-height: 40px; /* IR Fix */
}
#jsddm li ul li a:hover
{
/*background: #4370B6;
color: #FFF;*/
}