item from navbar hiding another

Question

In my current project, I have this html in one of my views:

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

where this part:

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

it's hiding the firts of <li><a href="#">blablabla</a></li>. the css style for this item is:

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

and for the header:

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

anyone knows how to avoid that overlap?

Answer 1

The error is because in ur code u r giving li float: left Add this one

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

}

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

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