Question

我的菜单图标出现问题。对于我的桌面css，我设置为不显示。在1000px下我将它设置为显示块。到目前为止，所有设备都显示图标。任何帮助表示赞赏。

/* blah blah blah */

.icon-dropdown {
	display: none;
}

@media screen and (max-width: 1000px) {
    .icon-dropdown {
	  display: block;
	  position: absolute;
	  left: 80%;
	  top: 50px;
	}
	.icon-dropdown div{
	  display: block;
	  background-color: black;
	  width: 35px;
	  height: 4px;
	  margin-bottom: 3px;	
	  position: relative;
    }




}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Vintage McDonald's</title>
	<meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png">
</head>
<body>
<div class="wrapper">
	<header>
		<a href="index.html"><img src="vintagelogo.jpg" width="90px" height="90px"></a>
		<h1>Vintage McDonald's!</h1>
		<div class="icon-dropdown">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</header>
	<span class="menu-trigger">Menu</span> 
	<nav>
		<ul>
			<li><a href="about.html">ABOUT MCDONALD'S</a></li>
			<li><a href="classics.html">OUR CLASSICS</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>
	</nav>
	<div class="slideShow">
	<img class="placeHolder" src="1.jpg"> 
		<div class="layer1"></div>
		<div class="layer2"></div>
		<div class="layer3"></div>
		<div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p>
		</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>

Answer 1

尝试使用此媒体查询：

@media (max-width: 800px) {
    .icon-dropdown {
      display: block;
      position: absolute;
      left: 80%;
      top: 50px;
    }
    .icon-dropdown div{
      display: block;
      background-color: black;
      width: 35px;
      height: 4px;
      margin-bottom: 3px;   
      position: relative;
    }

}

之后，尝试缩小浏览器以查看效果。

Answer 2

尝试设置图标的宽度和高度。

菜单图标不会消失

2 个答案: