CSS Absolute Responsive Navigation

Question

I am having issue where the Nav UL with class .hidden is appearing off the screen when the navigation link is at the end and there is not enough space for it to show.

The following screenshot illustrates what happens when you gradually resize the browser, you will be able to see the issue.

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

just add those lines to your css:

nav ul li {
  position: relative;
}

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

Result:

 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>