浮动多级顶部导航，没有溢出

时间：2017-05-21 12:11:20

标签： html css css3 menu

我重新创建了我的网站@ http://codepen.io/micsad/pen/mmzrZO的顶部导航（请参阅下面的代码）

我希望它是：

  • 固定在浏览器视口的顶部
  • 带有下拉菜单的多级
  • 顶级不会在较小的桌面屏幕上溢出

将溢出设置为隐藏在#navigationcss上会停止溢出，但也会杀死下拉列表。

当它被删除后，下拉列表又回来了，但是溢出了。

如何实现多级固定顶级导航的任何想法，其顶层不会在较小的桌面屏幕上溢出？现实中我的选择是什么？

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<!--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>
		<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>
	</ul>
</li>
<li><a href='#'>SECTION 4</a>
    <ul>
		  <li><a href='#'>Sublink 1</a></li>    
    	<li><a href='#'>Sublink 2</a></li>
     	<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>
    	<li><a href='#'>Sublink 1</a></li>
    	<li><a href='#'>Sublink 2</a></li> 
      <li><a href='#'>Sublink 3</a></li>    
 	  </ul>
  </li>
  </ul>
</div>   
<!--End Navigation -->
<p>The nav bar overflows onto this line as you shrink the browser.</p>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我已将display flex添加到#navigationcss。而作为一个小调整，也是李的最小宽度。

这种问题很容易用flexbox解决： - ）

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<!--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>
		<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>
	</ul>
</li>
<li><a href='#'>SECTION 4</a>
    <ul>
		  <li><a href='#'>Sublink 1</a></li>    
    	<li><a href='#'>Sublink 2</a></li>
     	<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>
    	<li><a href='#'>Sublink 1</a></li>
    	<li><a href='#'>Sublink 2</a></li> 
      <li><a href='#'>Sublink 3</a></li>    
 	  </ul>
  </li>
  </ul>
</div>   
<!--End Navigation -->
<p>The nav bar overflows onto this line as you shrink the browser.</p>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题