html - 乌里 :hover Unstable Look

Question

我遇到了 ul li:hover 的问题。

谁能帮我解决一下？

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

#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;
}

<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>

Answer 1

编织: 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>