他の多くの開発者と同じように、CSSPNGの背景を使用しているときに同じ黒いハローの問題が発生しています。(ぼやけを無視します。黒いハローに焦点を合わせます)。
========== HTML ==========
<div class="s4-notdlg append-bottom-x" id="header"> <a class="show-settings active" href="javascript:;"></a>
<div class="container">
<div class="span-13 last">
<div id="explore"> <a id="header-home-icon" href="" class=""></a> <a id="menu" href="javascript:;" class=""></a>
<div id="dropdown" style="display: none;">
<div id="wrap"> </div>
</div>
<a style="bottom: 112px;position: absolute;right: 84px;" class="closeThis close" href="javascript:;"></a> </div>
</div>
</div>
</div>
========== CSS ==========
a#menu.active {
background-position: -399px -41px;
}
#dropdown {
background: url(images/bg/menu_dropdown_bg.png) no-repeat;
height: 340px;
/*height: 556px;*/
position: absolute;
right: -66px;
top: 48px;
width: 875px;
z-index: 99999;
display:none;
}
#dropdown #wrap {
/*height: 413px;*/
height: 211px;
margin: 26px 91px 0;
width: 698px;
}
========== jQuery ==========
//menu
var menu = $('#menu');
var dropdown = $('#dropdown');
menu.toggle(function () {
menu.addClass('active');
dropdown.fadeIn();
}, function () {
menu.removeClass('active');
dropdown.fadeOut();
return false;
});
dropdown.mouseleave(function () {
menu.trigger('click');
});
これは私が実装したものであり、サイコロはありません。