Question

当我调整窗口大小并打开汉堡包侧面菜单时，红色菜单项颜色不会分布在整个菜单项上，如导航栏中所示。我不是CSS专家所以我决定在这里提出这个问题。

这是一个截图，以澄清我在谈论的地方，如果你不理解。

屏幕截图：https://gyazo.com/06691a8d7fca1ec8fbc9a5c5594cd596

必须如何：https://gyazo.com/4f84faa183513f16a2eac647cdc75e25

这是我的源代码：

＆＃13;

	$(document).ready(main);

var contador = 1;

function main(){
	$('.menu_bar').click(function(){
		// $('nav').toggle(); 

		if(contador == 1){
			$('nav').animate({
				left: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
				left: '-100%'
			});
		}

	});

};

＆＃13;

/*------Nav-------*/
header {
	width:100%;
}
 
header nav {
	width:100%;
	background:#2f354e;
  z-index:11;
}
 
.menu_bar {
	display:none;
}
 
header nav ul {
	overflow:hidden;
	list-style:none;
	margin: 0px;
	padding: 0px;
}
 
header nav ul li {
	float:left;
}
 
header nav ul li a {
	color:#fff;
	padding:14px;
	display:block;
	text-decoration:none;
}
 
header nav ul li span {
	margin-right:10px;
}
 
header nav ul li a:hover {
	background:red;
	text-decoration: none;
	color:#ffffff;
}

 
@media screen and (max-width:800px ) {
	header nav {
		width:150px;
		height:100%;
		left:-100%;
		margin:0px;
		position: fixed;
	}
 
	header nav ul li {
		display:block;
		float:left !important
	}
 
	.menu_bar {
		display:block;
		width:100%;
		background:#ccc;
    text-align:center;
	}
 
	.menu_bar .bt-menu {
		display:block;
		padding:20px;
		background:#2f354e;
		color:#fff;
		text-decoration:none;
		font-weight: bold;
		font-size:25px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
 
	.menu_bar span {
		float:right;
		font-size:30px;
	}
}
/*--------End of the nav-------*/

/*-------- Generic styles-------*/
body{
  overflow: scroll;
  margin:0px;
  font-family: sans-serif;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
</head>
<header>
    <div class="menu_bar">
        <a href="#" class="bt-menu"><span class="fa fa-bars"></span>Fastmovie Renesse</a>
    </div>

    <nav>
        <ul>
            <li><a href="index.php"><span class="fa fa-home"></span>Home</a></li>
            <li><a href="movies.php"><span class="fa fa-film"></span>Films</a></li>
            <li><a href="reserveringen.php"><span class="fa fa-envelope"></span>Reserveren</a></li>
            <li><a href="#"><span class="fa fa-info-circle"></span>Over ons</a></li>
            <li style="float:right"><a href="login.php"><span class="fa fa-sign-in"></span>Login</a></li>



        </ul>
    </nav>
</header>

＆＃13;

Answer 1

在width: 150px; 中将header nav ul li a:hover设为@media screen and (max-width:800px ) {}

这是JSFiddle：https://jsfiddle.net/k1cbfh70/1/

	$(document).ready(main);

var contador = 1;

function main(){
	$('.menu_bar').click(function(){
		// $('nav').toggle(); 

		if(contador == 1){
			$('nav').animate({
				left: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
				left: '-100%'
			});
		}

	});

};

/*------Nav-------*/
header {
	width:100%;
}
 
header nav {
	width:100%;
	background:#2f354e;
  z-index:11;
}
 
.menu_bar {
	display:none;
}
 
header nav ul {
	overflow:hidden;
	list-style:none;
	margin: 0px;
	padding: 0px;
}
 
header nav ul li {
	float:left;
}
 
header nav ul li a {
	color:#fff;
	padding:14px;
	display:block;
	text-decoration:none;
}
 
header nav ul li span {
	margin-right:10px;
}
 
header nav ul li a:hover {
	background:red;
	text-decoration: none;
	color:#ffffff;
   width: 150px;
}

 
@media screen and (max-width:800px ) {
	header nav {
		width:150px;
		height:100%;
		left:-100%;
		margin:0px;
		position: fixed;
	}
 
	header nav ul li {
		display:block;
		float:left !important
	}
     header nav ul li a:hover {
       width: 150px;
    }
	.menu_bar {
		display:block;
		width:100%;
		background:#ccc;
    text-align:center;
	}
 
	.menu_bar .bt-menu {
		display:block;
		padding:20px;
		background:#2f354e;
		color:#fff;
		text-decoration:none;
		font-weight: bold;
		font-size:25px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
 
	.menu_bar span {
		float:right;
		font-size:30px;
	}
}
/*--------End of the nav-------*/

/*-------- Generic styles-------*/
body{
  overflow: scroll;
  margin:0px;
  font-family: sans-serif;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
</head>
<header>
    <div class="menu_bar">
        <a href="#" class="bt-menu"><span class="fa fa-bars"></span>Fastmovie Renesse</a>
    </div>

    <nav>
        <ul>
            <li><a href="index.php"><span class="fa fa-home"></span>Home</a></li>
            <li><a href="movies.php"><span class="fa fa-film"></span>Films</a></li>
            <li><a href="reserveringen.php"><span class="fa fa-envelope"></span>Reserveren</a></li>
            <li><a href="#"><span class="fa fa-info-circle"></span>Over ons</a></li>
            <li style="float:right"><a href="login.php"><span class="fa fa-sign-in"></span>Login</a></li>



        </ul>
    </nav>
</header>

Answer 2

  header nav ul li {＆＃xA;显示：块;＆＃XA; float：left！important＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

这只需要 float：none ，所以这些物品超过了整个宽度，而不是缩小到他们的内容所要求的范围。（并且不需要！important ，至少不在您给出的示例中。）

＆＃xA;

Answer 3

只需将width:100%放在较小分辨率的li标签上即可。

示例：在你的css代码的这一部分放置宽度：100％。

 @media screen and (max-width: 800px)
header nav ul li {
    display: block;
    float: left !important;
    width: 100%;
}

以下是运行DEMO

的代码的jsfidle链接

Answer 4

这对我有用，在媒体查询中添加width: 100%;

@media screen and (max-width: 800px)

    header nav ul li {
    display: block;
    float: left !important;
    width: 100%;

   }

Navbar汉堡菜单修复了侧边菜单

4 个答案: