CSS Absolute Responsive Navigation

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>