</p> <p>（以下のコードを参照してください）私は<a href="http://codepen.io/micsad/pen/mmzrZO" rel="nofollow noreferrer">http://codepen.io/micsad/pen/mmzrZO</a> @私のウェブサイトのトップナビゲーションを再現していないオーバーフロー

Question

とマルチレベル上部のナビゲーションをフローティング私はそれになりたい：

ブラウザのビューポートの上部に固定され

• ドロップダウントップレベルの小型デスクトップ画面に溢れていないと
• と
• マルチレベル

#navigationcssでオーバーフローを非表示に設定すると、オーバーフローはなくなりますが、ドロップダウンも終了します。

削除すると、ドロップダウンは元に戻りますが、あふれています。

小規模なデスクトップ画面でトップレベルがオーバーフローしないマルチレベル固定トップナビを実現する方法はありますか？私の選択肢は現実的に何ですか？

/* Horizontal top nav menu */ 
 

 

 
#navigationbar { 
 
width: 100%; /* change the width of the navigation bar */ 
 
height: 50px; /* change the height of the navigation bar */ 
 

 
} 
 

 
#navigationcss { 
 
margin: 0 auto; 
 
padding: 0px; 
 
text-align: auto; 
 
background: #E64238; 
 
z-index: 100; 
 
position: fixed; 
 
width: 100%; /* change the width of the navigation bar */ 
 
height: 50px; /* change the height of the navigation bar */ 
 
} 
 

 
#navigationcss ul { 
 
float: none; 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: visible; 
 
} 
 

 
#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited { 
 
color: #ffffff; /* change color of the main links */ 
 
display: block; 
 
margin: 0; 
 
padding: 15px 20px; /* change the first number for the top/bottom spacing, and the second number for left/right spacing */ 
 
font-family: Verdana; 
 
text-decoration: none; 
 
} 
 

 
#navigationcss li a:hover, #navigationcss li a:active { 
 
color: #ffffff ; /* change the color of the links when hovered over */ 
 
background: #87B60E; 
 
margin: 0; 
 
padding: 15px 20px; /* make sure these are the same as the section above! */ 
 
} 
 

 
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited { 
 
background: #87B60E; /* change the background color of the drop down box */ 
 
width: 200px; 
 
color: #ffffff; /* change the color of the drop down links */ 
 
float: none; 
 
margin: 0; 
 
padding: 7px 10px; /* similar to above, change for the spacing around the links */ 
 
text-align: left; 
 
} 
 

 
#navigationcss li li a:hover, #navigationcss li li a:active { 
 
background: #E64238 ; /* change the background color of drop down items on hover */ 
 
color: #ffffff; /* change the color of drop down links on hover */ 
 
padding: 7px 10px; /* keep these the same as the above section */ 
 
} 
 

 
#navigationcss li { 
 
float: none; 
 
display: inline-block; 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#navigationcss li ul { 
 
z-index: 9999; 
 
position: absolute; 
 
left: -999em; 
 
height: auto; 
 
width: 150px; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 
 
left: auto; 
 
} 
 

 
#logo { 
 
    float: left; 
 
    padding-right: 40px; /* change space between logo and first navigation item */ 
 
    padding-left: 50px; 
 
} 
 

 
#promonav1 { 
 
    background: grey; 
 
} 
 

 
#promonav2 { 
 
    background: grey; 
 
}

<!--Start Navigation --> 
 
<div id='navigationbar'> 
 
    <ul id='navigationcss'><a href='#'><img id='logo' src='https://placeholdit.imgix.net/~text?txtsize=9&txt=LOGO&w=50&h=50&txttrack=0'/></a> 
 
    
 
<li><a href='#'>SECTION 1</a> 
 
    <ul> 
 
    <li><a href='#'>Sublink 1</a></li> 
 
    <li><a href='#'>Sublink 2</a></li> 
 
    <li><a href='#'>Sublink 3</a></li> 
 
    <li><a href='#'>Sublink 4</a></li> 
 
    <li><a href='#'>Sublink 5</a></li> 
 
    <li><a href='#'>Sublink 6</a></li> 
 
    <li><a href='#'>Sublink 7</a></li> 
 
    <li><a href='#'>Sublink 8</a></li> 
 
    </ul> 
 
</li> 
 
<li><a href='#'>SECTION 2</a> 
 
    <ul> 
 
    <li><a href='#'>Sublink 1</a></li> 
 
    <li><a href='#'>Sublink 2</a></li> 
 
    <li><a href='#'>Sublink 3</a></li> 
 
    <li><a href='#'>Sublink 4</a></li> 
 
    <li><a href='#'>Sublink 5</a></li> 
 
    <li><a href='#'>Sublink 6</a></li> 
 
    <li><a href='#'>Sublink 7</a></li> 
 
    <li><a href='#'>Sublink 8</a></li> 
 
    </ul> 
 
</li> 
 
<li><a href='#'>SECTION 3</a> 
 
    <ul> 
 
\t \t <li><a href='#'>Sublink 1</a></li>  
 
    \t <li><a href='#'>Sublink 2</a></li> 
 
    <li><a href='#'>Sublink 3</a></li> 
 
    <li><a href='#'>Sublink 4</a></li> 
 
    <li><a href='#'>Sublink 5</a></li> 
 
\t \t <li><a href='#'>Sublink 6</a></li> 
 
\t </ul> 
 
</li> 
 
<li><a href='#'>SECTION 4</a> 
 
    <ul> 
 
\t \t <li><a href='#'>Sublink 1</a></li>  
 
    \t <li><a href='#'>Sublink 2</a></li> 
 
     \t <li><a href='#'>Sublink 3</a></li>   </ul> 
 
</li> 
 
<li><a href='#'>SECTION 5</a> 
 
    <ul> 
 
     <li><a href='#'>Sublink 1</a></li> 
 
     <li><a href='#' target='_blank'>Sublink 2</a></li> 
 
     <li><a href='#' target='_blank'>Sublink 3</a></li> 
 
     <li><a href='#' target='_blank'>Sublink 4</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href='#' id='promonav1' target='_blank'>SECTION 6</a></li> 
 
    <li><a href='#' id='promonav2' target='_blank'>SECTION 7</a></li> 
 
    <li><a href='#'>KONTAKT</a> 
 
    <ul> 
 
    \t <li><a href='#'>Sublink 1</a></li> 
 
    \t <li><a href='#'>Sublink 2</a></li> 
 
     <li><a href='#'>Sublink 3</a></li>  
 
    \t </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!--End Navigation --> 
 
<p>The nav bar overflows onto this line as you shrink the browser.</p>

Answer 1

私は#navigationcssにFlexの表示を追加しました。そして、マイナーな調整として、また、李の最小幅。問題の

この種類は

/* Horizontal top nav menu */ 
 

 

 
#navigationbar { 
 
width: 100%; /* change the width of the navigation bar */ 
 
height: 50px; /* change the height of the navigation bar */ 
 

 
} 
 

 
#navigationcss { 
 
margin: 0 auto; 
 
padding: 0px; 
 
text-align: auto; 
 
background: #E64238; 
 
z-index: 100; 
 
position: fixed; 
 
width: 100%; /* change the width of the navigation bar */ 
 
height: 50px; /* change the height of the navigation bar */ 
 
    display: flex; /* added */ 
 
} 
 

 
#navigationcss ul { 
 
float: none; 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: visible; 
 
} 
 

 
#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited { 
 
color: #ffffff; /* change color of the main links */ 
 
display: block; 
 
margin: 0; 
 
padding: 15px 20px; /* change the first number for the top/bottom spacing, and the second number for left/right spacing */ 
 
font-family: Verdana; 
 
text-decoration: none; 
 
} 
 

 
#navigationcss li a:hover, #navigationcss li a:active { 
 
color: #ffffff ; /* change the color of the links when hovered over */ 
 
background: #87B60E; 
 
margin: 0; 
 
padding: 15px 20px; /* make sure these are the same as the section above! */ 
 
} 
 

 
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited { 
 
background: #87B60E; /* change the background color of the drop down box */ 
 
width: 200px; 
 
color: #ffffff; /* change the color of the drop down links */ 
 
float: none; 
 
margin: 0; 
 
padding: 7px 10px; /* similar to above, change for the spacing around the links */ 
 
text-align: left; 
 
} 
 

 
#navigationcss li li a:hover, #navigationcss li li a:active { 
 
background: #E64238 ; /* change the background color of drop down items on hover */ 
 
color: #ffffff; /* change the color of drop down links on hover */ 
 
padding: 7px 10px; /* keep these the same as the above section */ 
 
} 
 

 
#navigationcss li { 
 
float: none; 
 
display: inline-block; 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
min-width: 130px; /* added */ 
 
} 
 

 
#navigationcss li ul { 
 
z-index: 9999; 
 
position: absolute; 
 
left: -999em; 
 
height: auto; 
 
width: 150px; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 
 
left: auto; 
 
} 
 

 
#logo { 
 
    float: left; 
 
    padding-right: 40px; /* change space between logo and first navigation item */ 
 
    padding-left: 50px; 
 
} 
 

 
#promonav1 { 
 
    background: grey; 
 
} 
 

 
#promonav2 { 
 
    background: grey; 
 
}

<!--Start Navigation --> 
 
<div id='navigationbar'> 
 
    <ul id='navigationcss'><a href='#'><img id='logo' src='https://placeholdit.imgix.net/~text?txtsize=9&txt=LOGO&w=50&h=50&txttrack=0'/></a> 
 
    
 
<li><a href='#'>SECTION 1</a> 
 
    <ul> 
 
    <li><a href='#'>Sublink 1</a></li> 
 
    <li><a href='#'>Sublink 2</a></li> 
 
    <li><a href='#'>Sublink 3</a></li> 
 
    <li><a href='#'>Sublink 4</a></li> 
 
    <li><a href='#'>Sublink 5</a></li> 
 
    <li><a href='#'>Sublink 6</a></li> 
 
    <li><a href='#'>Sublink 7</a></li> 
 
    <li><a href='#'>Sublink 8</a></li> 
 
    </ul> 
 
</li> 
 
<li><a href='#'>SECTION 2</a> 
 
    <ul> 
 
    <li><a href='#'>Sublink 1</a></li> 
 
    <li><a href='#'>Sublink 2</a></li> 
 
    <li><a href='#'>Sublink 3</a></li> 
 
    <li><a href='#'>Sublink 4</a></li> 
 
    <li><a href='#'>Sublink 5</a></li> 
 
    <li><a href='#'>Sublink 6</a></li> 
 
    <li><a href='#'>Sublink 7</a></li> 
 
    <li><a href='#'>Sublink 8</a></li> 
 
    </ul> 
 
</li> 
 
<li><a href='#'>SECTION 3</a> 
 
    <ul> 
 
\t \t <li><a href='#'>Sublink 1</a></li>  
 
    \t <li><a href='#'>Sublink 2</a></li> 
 
    <li><a href='#'>Sublink 3</a></li> 
 
    <li><a href='#'>Sublink 4</a></li> 
 
    <li><a href='#'>Sublink 5</a></li> 
 
\t \t <li><a href='#'>Sublink 6</a></li> 
 
\t </ul> 
 
</li> 
 
<li><a href='#'>SECTION 4</a> 
 
    <ul> 
 
\t \t <li><a href='#'>Sublink 1</a></li>  
 
    \t <li><a href='#'>Sublink 2</a></li> 
 
     \t <li><a href='#'>Sublink 3</a></li>   </ul> 
 
</li> 
 
<li><a href='#'>SECTION 5</a> 
 
    <ul> 
 
     <li><a href='#'>Sublink 1</a></li> 
 
     <li><a href='#' target='_blank'>Sublink 2</a></li> 
 
     <li><a href='#' target='_blank'>Sublink 3</a></li> 
 
     <li><a href='#' target='_blank'>Sublink 4</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href='#' id='promonav1' target='_blank'>SECTION 6</a></li> 
 
    <li><a href='#' id='promonav2' target='_blank'>SECTION 7</a></li> 
 
    <li><a href='#'>KONTAKT</a> 
 
    <ul> 
 
    \t <li><a href='#'>Sublink 1</a></li> 
 
    \t <li><a href='#'>Sublink 2</a></li> 
 
     <li><a href='#'>Sublink 3</a></li>  
 
    \t </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!--End Navigation --> 
 
<p>The nav bar overflows onto this line as you shrink the browser.</p>