段落包括通过过渡带来的div

Why does the paragraph always cover the div that is shown when you hover over link 1 in this example? I have tried changing the z-index of both the paragraph and the list, but nothing works. The thing that really makes me not understand is the fact that during the transition, the list appears over the paragraph. Then, after the transition, the paragraph seems to change z-index. Any help would be great.

为什么段落总是覆盖在此示例中将鼠标悬停在链接1上时显示的div?我已经尝试更改段落和列表的z-index,但没有任何作用。真正让我不理解的事实是,在过渡期间,列表出现在段落上。然后,在转换之后,段落似乎改变了z-index。任何帮助都会很棒。

div {
  background-color: #BFBFBF;
  height: 50px;
  width: 100%;
  z-index: 1;
}
.NavList {
  list-style: none;
  margin: 0;
  padding: 0;
}
.NavListItem {
  display: inline-block;
  text-align: center;
  float: left;
}
.NavListItem:Hover .NavLink {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100px;
  color: #BFBFBF;
  text-decoration: none;
  background-color: #7F7F7F;
  transition: background-color .5s;
}
.NavLink {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100px;
  color: #BFBFBF;
  text-decoration: none;
  background-color: #404040;
  transition: background-color .5s;
}
.NavListItem:Hover .SubNavList {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 1;
  z-index: 100;
  transition: opacity 5s;
}
.NavListItem:Hover .SubNavListItem {
  display: block;
  text-align: center;
}
.NavListItem:Hover .SubNavLink {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100px;
  color: #BFBFBF;
  text-decoration: none;
  background-color: #7F7F7F;
  transition: background-color .5s;
}
.NavListItem:Hover .SubNavLink:Hover {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100px;
  color: #BFBFBF;
  text-decoration: none;
  background-color: #404040;
  transition: background-color .5s;
}
.SubNavList {
  display: block;
  width: 0px;
  height: 0px;
  opacity: 0;
  transition: opacity 5s;
  z-index: 100;
}
.SubNavListItem {
  display: none;
}
p {
  z-index: -1;
}

<body>
  <div>
    <ul class="NavList">
      <li class="NavListItem">
        <a href="#" class="NavLink">Home</a>
      </li>
      <li class="NavListItem">
        <a href="#" class="NavLink">Link 1</a>
        <ul class="SubNavList">
          <li class="SubNavListItem">
            <a href="#" class="SubNavLink">SubLink 1</a>
          </li>
          <li class="SubNavListItem">
            <a href="#" class="SubNavLink">SubLink 2</a>
          </li>
        </ul>
      </li>
      <li class="NavListItem">
        <a href="#" class="NavLink">Link 2</a>
        <ul class="SubNavList">
          <li class="SubNavListItem">
            <a href="#" class="SubNavLink">SubLink 3</a>
          </li>
          <li class="SubNavListItem">
            <a href="#" class="SubNavLink">SubLink 4</a>
          </li>
        </ul>
      </li>
      <li class="NavListItem">
        <a href="#" class="NavLink">Link3</a>
      </li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</body>

更多相关文章

随机推荐