桌面导航版背景颜色不起作用？

Question

所以有些东西会覆盖我网页中的background-color属性。它在移动缩放版本中工作得很好，但由于某些原因，当它运行媒体查询时，背景颜色与正文背景颜色相匹配。

然而，当我使用nav {position：fixed;}时，它确实有效，但我无法将其设置为固定，因为它上方有一个标题，所以当你向下滚动导航棒时，它上方有一个空格。

那么是什么导致媒体查询背景颜色被覆盖？

编辑

当我在计算机上全屏显示时，这就是我所看到的 desktop nav shot 这就是我在移动布局mobile nav shot

时看到的内容

（对不起，如果这是一个明显的答案，我只是没有看到它）

/*NAV*/

nav 
{
	background-color: #3f3f3f; /*this color doesn't work in the media query*/
	width: 100%;
	color: #e9e9e9;
	z-index: 3; 
}

/*MOBILE FIRST FORMATTING*/

nav ul 
{
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

nav li a 
{
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

nav li a:hover,
nav .hambut:hover 
{
  background-color: #189000; /*green*/
}


/*NAV LINKS*/

nav .menu 
{
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/*MENU FORMATTING*/

nav .hamicon 
{
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 2em 1.5em;
  position: relative;
}

nav .hamicon .navicon 
{
  background: #e9e9e9;
  display: block;
  height: .15em;
  position: relative;
  transition: background .2s ease-out;
  width: 1.5em;
}

nav .hamicon .navicon:before,
nav .hamicon .navicon:after 
{
  background: #e9e9e9;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

nav .hamicon .navicon:before 
{
  top: .375em;
}

nav .hamicon .navicon:after 
{
  top: -.375em;
}

/*HAMBURGER BUTTON*/

nav .hambut 
{
  display: none;
}

nav .hambut:checked ~ .menu 
{
  max-height: 15em;
}

nav .hambut:checked ~ .hamicon .navicon 
{
  background: transparent;
}

nav .hambut:checked ~ .hamicon .navicon:before 
{
  transform: rotate(-45deg);
}

nav .hambut:checked ~ .hamicon .navicon:after 
{
  transform: rotate(45deg);
}

nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after 
{
  top: 0;
}


/*DESKTOP NAV FORMATTING*/


@media (min-width: 48em) 
{
	
	nav
	{
		background-color: #3f3f3f;
	}
	nav li 
	{
		float: left;
	}

	nav li a 
	{
		padding: 1em 1.5em;
	}

	nav .menu 
	{
		clear: none;
		float: right;
		max-height: none;
	}

	nav .hamicon
	{
		display: none;
	}
  
}

		<nav> 
           
			<input class="hambut" type="checkbox" id="hambut" />
			<label class="hamicon" for="hambut"><span class="navicon"></span></label>
			
			<ul class="menu">
				<li><a href="#about">About</a></li>
				<li><a href="#trailer">Trailer</a></li>
				<li><a href="#download">Download</a></li>
				<li><a href="#devs">Devs</a></li>
			</ul>


       </nav>

Answer 1

这是因为在桌面版中您使用float: right来对齐<ul>元素。 float property有一个奇怪的行为，并没有设计为对齐块元素，它被设计为对齐内联元素。

因此，当元素具有自动高度且其子元素使用float时，父元素将忽略该元素的大小以计算高度。

在您的情况下，结果是，在您的桌面版本中，您的<nav>元素将不会使用<ul>的高度来计算自己的高度，因为没有明确的高度，并且没有其他孩子，所得到的计算高度将 0px 。

你有两个解决方案，第一个是设置一个固定的高度：

nav {
  ..
  height: 50px;
}

第二，建议使用所谓的clearfix。

clearfix将取消float的效果，并且父元素将再次使用其所有子项大小来计算高度。

/*NAV*/

nav 
{
	background-color: #3f3f3f; /*this color doesn't work in the media query*/
	width: 100%;
	color: #e9e9e9;
	z-index: 3; 
}

/*MOBILE FIRST FORMATTING*/

nav ul 
{
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

nav li a 
{
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

nav li a:hover,
nav .hambut:hover 
{
  background-color: #189000; /*green*/
}


/*NAV LINKS*/

nav .menu 
{
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/*MENU FORMATTING*/

nav .hamicon 
{
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 2em 1.5em;
  position: relative;
}

nav .hamicon .navicon 
{
  background: #e9e9e9;
  display: block;
  height: .15em;
  position: relative;
  transition: background .2s ease-out;
  width: 1.5em;
}

nav .hamicon .navicon:before,
nav .hamicon .navicon:after 
{
  background: #e9e9e9;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

nav .hamicon .navicon:before 
{
  top: .375em;
}

nav .hamicon .navicon:after 
{
  top: -.375em;
}

/*HAMBURGER BUTTON*/

nav .hambut 
{
  display: none;
}

nav .hambut:checked ~ .menu 
{
  max-height: 15em;
}

nav .hambut:checked ~ .hamicon .navicon 
{
  background: transparent;
}

nav .hambut:checked ~ .hamicon .navicon:before 
{
  transform: rotate(-45deg);
}

nav .hambut:checked ~ .hamicon .navicon:after 
{
  transform: rotate(45deg);
}

nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after 
{
  top: 0;
}


/*DESKTOP NAV FORMATTING*/


@media (min-width: 48em) 
{
	
	nav
	{
		background-color: #3f3f3f;
	}
	nav li 
	{
		float: left;
	}

	nav li a 
	{
		padding: 1em 1.5em;
	}

	nav .menu 
	{
		clear: none;
		float: right;
		max-height: none;
	}

	nav .hamicon
	{
		display: none;
	}
  
}

		<nav> 
           
			<input class="hambut" type="checkbox" id="hambut" />
			<label class="hamicon" for="hambut"><span class="navicon"></span></label>
			
			<ul class="menu">
				<li><a href="#about">About</a></li>
				<li><a href="#trailer">Trailer</a></li>
				<li><a href="#download">Download</a></li>
				<li><a href="#devs">Devs</a></li>
			</ul>
            <!-- This is the clearfix -->
            <div style="clear: both"></div>
            <!-- End of clearfix -->
       </nav>