ドロップダウン メニューは、IE を除くすべてのブラウザで正常に動作しています。開発者ツールでホバー機能がトリガーされているのを確認できますが、何らかの理由でメニューが実際には表示されません。考えられるあらゆる方法で CSS を微調整しました...見落としているものはありますか?
サイトはhttp://www.ironbridgeband.comです。
音楽は自動的に再生されます (私の選択ではありません)。サウンド レベルには注意してください 。開発者ツールによると、IE9 はブラウザー モードです。
編集:使用されているCSSとJQueryは次のとおりです。
/*
LEVEL ONE
*/
#navigation > ul {text-align: center; position: relative;}
#navigation > ul li{
float: left;
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00990000,endColorstr=#00990000);
zoom: 1;
z-index: 0;
}
#navigation > ul a:hover {color: #000;}
#navigation > ul a:active {color: #fff;}
#navigation > ul li a {display: block;}
#navigation > ul li.hover,
#navigation > ul li:hover {color: #fff; position: relative; }
#navigation > ul li.hover a {color: #FFF;}
/*
LEVEL TWO
*/
ul.children{
list-style-type: none;
font-size: 0.8em;
width: 100%;
visibility: hidden;
position: absolute;
top: 50px;
z-index: 500;
margin-left: 0px !important;
padding-left: 0px !important;
line-height:2em;
background: transparent !important;
}
ul.children li{
font-size: 16px;
text-transform: none;
font-weight: normal;
float: none !important;
clear: both;
font-weight: bold;
background: #158082;
color: #fff;
border: none;
float: none;
margin-left: -25px !important;
padding: 0 !important;
z-index: 501;
}
ul.children li.hover{
background-color: transparent !important;
}
/* IE 6 & 7 Needs Inline Block */
ul.children li a{
border-right: none;
display: inline-block;
width:auto;
}
* JQuery: *
$(function(){
var config = {
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
console.log("doOpen()")
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
$('ul:first',this).css('z-index', '100001');
}
function doClose() {
console.log("doClose()")
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
}
$("#navigation > ul li").hoverIntent(config);
$("#navigation > ul li ul li:has(ul)").find("a:first").append(" » ");
});