Question

在我目前的项目中，我的一个观点中有这个html：

<header>
  <ul>
    <li>
      <nav>
        <ul>
          <li class="logo"> <a href="#"><img src="#" alt="logo"/></a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
        </ul>
      </nav>
    </li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
  </ul>
</header>

这部分：

    <li>
      <nav>
        <ul>
          <li class="logo"> <a href="#"><img src="#" alt="logo"/></a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
        </ul>
      </nav>
    </li>

它隐藏了<li><a href="#">blablabla</a></li>的第一个。这个项目的CSS样式是：

nav {
  z-index: 1;
  position: fixed;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #DCDCDC;
  width: 120px;
}

nav ul li.logo {
  width: 100%;
}

nav ul li.menu:hover {
  background-color: #C0C0C0;
  width: 100%;
}

nav ul li.menu > a {
  text-decoration-color: #FAEBD7;
  font-family: 'Special Elite', cursive;
}

nav ul li.menu:hover > a {
  text-decoration-color: #FFFAF0;
}

和标题：

header {
  top: 0;
  left: 0;
  background-color: #333;
  width:100%;
}

header:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 32px;
    overflow: hidden;
    background-color: #333;
    float: left;
    z-index: 2;
}

header ul.right {
  padding: 0;
  padding-right: 32px;
  float: right;
}

header ul li {
  float: left;
  display: inline;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

任何人都知道如何避免这种重叠？

Answer 1

错误是因为在你的代码中你给了li float: left 添加这个

header > ul > li {
  position: relative;
  display: inline-block;
  min-width: 130px;

}

＆＃13;

nav {
  z-index: 1;
  position: fixed;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #DCDCDC;
  width: 120px;
}

nav ul li.logo {
  width: 100%;
}

nav ul li.menu:hover {
  background-color: #C0C0C0;
  width: 100%;
}

nav ul li.menu > a {
  text-decoration-color: #FAEBD7;
  font-family: 'Special Elite', cursive;
}

nav ul li.menu:hover > a {
  text-decoration-color: #FFFAF0;
}
header {
  top: 0;
  left: 0;
  background-color: #333;
  width:100%;
}

header:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 32px;
    overflow: hidden;
    background-color: #333;
    float: left;
    z-index: 2;
}

header ul.right {
  padding: 0;
  padding-right: 32px;
  float: right;
}

header > ul > li {
  position: relative;
  display: inline-block;
  min-width: 130px;
  
}

header ul > li nav {  }

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

＆＃13;

<header>
  <ul>
    <li>
      <nav>
        <ul>
          <li class="logo"> <a href="#"><img src="#" alt="logo"/></a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
          <li class="menu"> <a href="#">blablabla</a> </li>
        </ul>
      </nav>
    </li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
  </ul>
</header>

＆＃13;

导航栏中隐藏另一项的项目

1 个答案: