Ul li：徘徊不稳定的样子

时间：2016-04-24 02:06:16

标签： html css

我遇到ul li:hover的问题。

任何人都可以帮我解决？

View fiddle on Plunker：http://plnkr.co/edit/4RDyOkZCFRWnuu42yAsm?p=preview

＆＃13;
＆＃13; 
#access {
  border-bottom: 10px #be1e2d solid;
  width: 100%;
  height: 50px
}

.menu-main-menu-container {
  overflow: hidden;
  float: left;
}

.menu-main-menu-container ul {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

.menu-main-menu-container li {
  display: inline;
  margin: 0 2px 0 0;
  padding: 0;
  text-transform: uppercase;
}

.menu-main-menu-container li a {
  float: left !important;
  color: #333;
  display: block;
  font-size: 14px;
  padding: 17px;
  position: relative;
  text-decoration: none;
  z-index: 999;
}

.menu-main-menu-container li a:hover {
  background: url(images/menu-arrow.png) bottom center no-repeat;
}


/* Sub level menus*/
.menu li:hover > ul {
  visibility: visible;
}

.menu-main-menu-container ul li ul {
  position: absolute;
  z-index: 1001;
  left: 0;
  top: 65px;
  background: #771214;
  /*sub menu background color */
  visibility: hidden;
}


/* Sub level menu links style */
.menu-main-menu-container ul li ul li a {
  color: #fff;
  font-size: 12px;
  padding: 6px;
  padding-right: 8px;
  margin: 0;
  background: #771214;
  /*sub menu background color */
}

.menu-main-menu-container ul li ul li a:hover {
  /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
  background: #be1e2d;
}
＆＃13; 
<div id="access">
  <div id="main-menu">
    <div class="menu-main-menu-container">
      <ul id="menu-main-menu" class="menu">
        <li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-79"><a href="http://localhost/pecimerah/">Home</a></li>
        <li id="menu-item-84" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-84"><a href="http://localhost/pecimerah/rubrik/pernak-pernik">Category</a>
          <ul class="sub-menu">
            <li id="menu-item-87" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-87"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/gaya">Sub Menu 1</a></li>
            <li id="menu-item-88" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-88"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/jajanan">Sub Menu 2</a></li>
            <li id="menu-item-89" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-89"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resensi">Sub Menu 3</a></li>
            <li id="menu-item-90" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-90"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resep">Sub Menu 4</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

编织： http://kodeweave.sourceforge.net/editor/#441c4f1050ed7fa1fe7d91a1c96be28a

您的问题并不清楚您所期望的效果目标。

但是我的假设是您希望将鼠标悬停在category上，然后点击任何子菜单，而不会淡出。

在这里你可以进行简单的修复，改变...... 

.menu-main-menu-container ul li ul {
  top: 65px;
}

到

.menu-main-menu-container ul li ul {
  top: 50px;
}


#access {
  border-bottom: 10px #be1e2d solid;
  width: 100%;
  height: 50px
}

.menu-main-menu-container {
  overflow: hidden;
  float: left;
}

.menu-main-menu-container ul {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

.menu-main-menu-container li {
  display: inline;
  margin: 0 2px 0 0;
  padding: 0;
  text-transform: uppercase;
}

.menu-main-menu-container li a {
  float: left !important;
  color: #333;
  display: block;
  font-size: 14px;
  padding: 17px;
  position: relative;
  text-decoration: none;
  z-index: 999;
}

.menu-main-menu-container li a:hover {
  background: url(images/menu-arrow.png) bottom center no-repeat;
}


/* Sub level menus*/
.menu li:hover > ul {
  visibility: visible;
}

.menu-main-menu-container ul li ul {
  position: absolute;
  z-index: 1001;
  left: 0;
  top: 50px;
  background: #771214;
  /*sub menu background color */
  visibility: hidden;
}


/* Sub level menu links style */
.menu-main-menu-container ul li ul li a {
  color: #fff;
  font-size: 12px;
  padding: 6px;
  padding-right: 8px;
  margin: 0;
  background: #771214;
  /*sub menu background color */
}

.menu-main-menu-container ul li ul li a:hover {
  /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
  background: #be1e2d;
}
<div id="access">
  <div id="main-menu">
    <div class="menu-main-menu-container">
      <ul id="menu-main-menu" class="menu">
        <li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-79"><a href="http://localhost/pecimerah/">Home</a></li>
        <li id="menu-item-84" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-84"><a href="http://localhost/pecimerah/rubrik/pernak-pernik">Category</a>
          <ul class="sub-menu">
            <li id="menu-item-87" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-87"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/gaya">Sub Menu 1</a></li>
            <li id="menu-item-88" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-88"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/jajanan">Sub Menu 2</a></li>
            <li id="menu-item-89" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-89"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resensi">Sub Menu 3</a></li>
            <li id="menu-item-90" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-90"><a href="http://localhost/pecimerah/rubrik/pernak-pernik/resep">Sub Menu 4</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

相关问题
最新问题