html - CSS 绝对响应式导航

Question

我遇到的问题是，当导航链接位于末尾并且没有足够的空间来显示时，类为 .hidden 的 Nav UL 出现在屏幕之外。

以下屏幕截图说明了当您逐渐调整浏览器大小时发生的情况，您将能够看到该问题。

Code pen example

<nav>
      <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button" />
      <ul id="menu">
  <li>
  <a href="#">Nav Item 1 ^</a>
    <ul class="hidden">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Nav Item 2</a>
  </li>
  <li>
    <a href="#">Nav Item 3</a>
  </li>
  <li>
    <a href="#">Nav Item 4</a>
  </li>
  <li>
    <a href="#">Nav Item 5 ^</a>
    <ul class="hidden">
      <li><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Nav Item 6</a>
  </li>
  <li>
    <a href="#">Nav Item 7</a>
  </li>
  <li>
    <a href="#">Nav Item 8 ^</a>
    <ul class="hidden">
       <li><a href="#">Nav Item 1</a></li>
       <li><a href="#">Nav Item 2</a></li>
       <li><a href="#">Nav Item 3</a></li>
    </ul>
  </li>
 </ul>
</nav>


nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: none;
}

nav li a {
   display: block;
   height: 50px;
   text-align: center;
   line-height: 50px;
   font-family: "Helvetica Neue";
   color: #fff;
   background: #A80B0D;
   text-decoration: none;
}

#show-menu {
   display: none;
}

.show-menu {
   font-family: "Helvetica Neue";
   text-decoration: none;
   color: #fff;
   background: #A80B0D;
   text-align: center;
   padding: 10px;
   display: block;
}

nav li:hover ul a:hover {
   background: #DDDDDD;
   color: #000;
}

nav li:hover a {
   background: #333333;
}

nav ul li a:hover + .hidden,nav .hidden:hover {
   display: block ;
}

nav input[type=checkbox]:checked ~ #menu {
   display: block;
}

@media (min-width: 750px) {
   .show-menu {
      display: none;
   }

   nav ul#menu {
      display: block;
      text-align: center;
   }

   nav ul#menu {
      width: 100%;
      background-color: #A80B0D;
   }

   nav ul#menu li {
      display: inline-block;
   }

   nav ul#menu ul.hidden li {
      display: block;
      min-width: 200px;
   }

   nav ul.hidden {
      position: absolute;
   }

   nav li a {
      padding-left: 10px;
      padding-right: 10px;
   }
}

Answer 1

只需将这些行添加到您的 CSS 中:

nav ul li {
  position: relative;
}

nav ul li:last-child ul {
  right: 0;
}

结果:

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: none;
}

nav li a {
  display: block;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue";
  color: #fff;
  background: #A80B0D;
  text-decoration: none;
}

#show-menu {
  display: none;
}

.show-menu {
  font-family: "Helvetica Neue";
  text-decoration: none;
  color: #fff;
  background: #A80B0D;
  text-align: center;
  padding: 10px;
  display: block;
}

nav li:hover ul a:hover {
  background: #DDDDDD;
  color: #000;
}

nav li:hover a {
  background: #333333;
}

nav ul li a:hover + .hidden,
nav .hidden:hover {
  display: block;
}

nav input[type=checkbox]:checked ~ #menu {
  display: block;
}

nav ul li {
  position: relative;
}

nav ul li:last-child ul {
  right: 0;
}

@media (min-width: 750px) {
  .show-menu {
    display: none;
  }
  nav ul#menu {
    display: block;
    text-align: center;
  }
  nav ul#menu {
    width: 100%;
    background-color: #A80B0D;
  }
  nav ul#menu li {
    display: inline-block;
  }
  nav ul#menu ul.hidden li {
    display: block;
    min-width: 200px;
  }
  nav ul.hidden {
    position: absolute;
  }
  nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }
}

<nav>
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button" />
  <ul id="menu">
    <li>
      <a href="#">Nav Item 1 ^</a>
      <ul class="hidden">
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Nav Item 2</a>
    </li>
    <li>
      <a href="#">Nav Item 3</a>
    </li>
    <li>
      <a href="#">Nav Item 4</a>
    </li>
    <li>
      <a href="#">Nav Item 5 ^</a>
      <ul class="hidden">
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Nav Item 6</a>
    </li>
    <li>
      <a href="#">Nav Item 7</a>
    </li>
    <li>
      <a href="#">Nav Item 8 ^</a>
      <ul class="hidden">
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
      </ul>
    </li>
  </ul>
</nav>