子菜单未正确显示

Question

我在主菜单中有一个顶部菜单。此顶级菜单有子菜单，但此子菜单的行为不正常。我只能将鼠标悬停在第一个子菜单上，其余的都不能。如何解决这个问题？

这是我的代码：

.top-menuv2 ul {
  list-style-type: none;
  margin: 10px 20px 0 700px;
  font-size: 0.80em;
  float: none;
}

.top-menuv2 ul li {
  display: inline;
  margin-right: 20px;
  font-family: 'Open Sans Bold', sans-serif;
  line-height: 1.8;
}

.top-menuv2 a {
  color: black;
}

.top-menuv2 .top-navigation {
  text-align: center;
}

.top-menuv2 ul li>a:hover {
  color: #555;
  text-decoration: underline;
}

.top-menuv2 li:hover>ul {
  display: block;
}

.top-menuv2 ul li>a:active {
  color: #d31716;
}

.top-menuv2 li {
  display: inline-block;
  position: relative;
}

.top-menuv2 li>ul {
  position: absolute;
  right: -50%;
  top: 20%;
  width: auto;
  display: none;
  white-space: nowrap;
}

.top-menuv2>li>ul {
  top: auto;
  right: -50%;
  width: 100%;
}

.top-menuv2 li>a:after {
  margin-left: 5px;
  content: '\f107';
  font-family: FontAwesome;
}

.top-menuv2>li>a:after {
  margin-left: 5px;
  content: '\f107';
  font-family: FontAwesome;
}

.top-menuv2 li>a:only-child:after {
  margin-left: 0;
  content: '';
}

.top-menuv2 li>ul>li {
  display: block;
}

<div class="top-navigation top-menuv2">
  <ul>
    <li class="cs cc">&nbsp;Customer Service 02 753 57 11</li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Our Partners</a>
      <ul>
        <li><a href="#">Tangible benefits for retailers</a></li>
        <li><a href="#/">Retailer Registration Process</a></li>
      </ul>
    </li>
    <li><a href="#">Careers</a>
      <ul>
        <li><a href="#">A Career with Home Credit</a></li>
        <li><a href="#">Recruitment Process</a></li>
        <li><a href="#">Vacancies</a></li>
        <li><a href="#">Corporate Culture</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您必须更改 .top-menuv2 li > ul 的 z-index。将 z-index: 99; 添加到您的 .top-menuv2 li > ul。因为默认 #site-navigation .menu > ul > li 越过顶部菜单 li。

子菜单未正确显示

Sub menus is not properly displayed

html

css

menu

menuitem