我现在花了7个多小时在2个课程中:(所以我需要帮助很严重。 我有一个简单的基于CSS的菜单,它有下拉菜单,当我滚动下拉菜单时,菜单上有一个恼人的闪烁,它可能是鼠标指针没有正确隐藏或我不知道是什么导致这个..我已经集成了它用wordpress,请看看这里..
翻转菜单“Drop Down”并快速上下移动鼠标,您会发现这种闪烁..
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/* Skin part */
.sf-menu a {
color:#FFFFFF;
font-size:12px !important;
font-family:Open Sans;
font-weight:normal;
text-transform:normal;
padding: 3px 13px 3px 13px ;
}
.sf-menu li {
background: #000000;
white-space: nowrap; /* no need for Supersubs plugin */
}
.sf-menu li:hover,
.sf-menu li.sfHover {
background: #5e418d;
color:red;
}
.sf-menu li.selected,
.sf-menu li.current-cat,
.sf-menu li.current-cat-parent,
.sf-menu li.current_page_item,
.sf-menu li.current_page_parent,
.sf-menu li.current_page_ancestor {
background: #5e418d;
text-decoration: none;
}
.sf-menu li.current-menu-item a,
.sf-menu li.current-menu-item a:hover,
.sf-menu li.current-page-ancestor a,
.sf-menu li.current-page-ancestor a:hover,
.sf-menu li.current-menu-ancestor a,
.sf-menu li.current-menu-ancestor a:hover,
.sf-menu li.current-menu-parent a,
.sf-menu li.current-menu-parent a:hover,
.sf-menu li.current_page_parent a,
.sf-menu li.current_page_parent a:hover,
.sf-menu li.current_page_ancestor a,
.sf-menu li.current_page_ancestor a:hover {
color: #FFFFFF;
}
.sf-menu li:hover > a, .sf-menu li.sfhover > a { color:#FFFFFF; }
.sf-menu .sub-menu a {
color:#ffffff !important;
font-size:12px !important;
font-family:Open Sans;
font-weight:normal;
text-transform:normal;
padding: 3px 13px 3px 13px ;
}
.sf-menu .sub-menu a:hover { color:#444444 !important; }
.sf-menu ul li {
background: #020202; /*sub-menu background */
border-bottom: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
background: #FFFFFF;
}
.sf-menu ul {
border-top: 2px solid #5e418d;
}
.sf-menu .sub-menu li:last-child{
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
border-bottom: 2px solid #cccccc;
}