下拉菜单闪烁的鬼错误

时间:2014-02-15 12:52:08

标签: css wordpress

我现在花了7个多小时在2个课程中:(所以我需要帮助很严重。 我有一个简单的基于CSS的菜单,它有下拉菜单,当我滚动下拉菜单时,菜单上有一个恼人的闪烁,它可能是鼠标指针没有正确隐藏或我不知道是什么导致这个..我已经集成了它用wordpress,请看看这里..

http://goo.gl/h6tyoy

翻转菜单“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;
}   

0 个答案:

没有答案