CSS Absolut Responsive Navigation

Question

Ich habe ein Problem, wo die Nav UL mit Klasse .hidden vom Bildschirm erscheint, wenn der Navigationslink am Ende ist und es nicht genug Platz für die Anzeige gibt.

Der folgende Screenshot zeigt, was passiert, wenn Sie die Größe des Browsers nach und nach ändern, können Sie das Problem sehen.

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

nur diese Zeilen zu Ihrem CSS hinzufügen:

nav ul li { 
    position: relative; 
} 

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

Ergebnis:

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>