jquery - dropmenu 溢出而没有扩展横幅图像

Question

我想在不展开横幅图像的情况下创建下拉列表。我想在 meadiaquery 的标题下方显示下拉图像。现在定位 mobileMenu div 有问题

$(document).ready(function(){
    $(".mobileMenuImg").click(function(){
        $(".MobileItem").slideToggle();
    });
});

/*banner*/
.banner{
	 background-image: url("../image/banner-image.jpg");
	 background-repeat:no-repeat;
	 background-size:100% 100%;
	  text-align: center;
  
}
.banner-heading{
	margin-top:25px;
	font: bold 31px  roboto !important;
    color:#fff;  
	width:auto;
	text-align:center;
	
}
.banner-content{
	
	font: bold 50px  roboto !important;
    color:#fff; width:auto;
	
	text-align:center;
}
.banner-heading span,.banner-content span{
	background-color:#99408c;
	padding:0 10px;
}
.image-banner p{
	font: bold 20px roboto !important;
}
/*banner menu*/
.header{
	background-color:black;
	opacity:.7;
	padding:0;
	margin:0;
	width:100%;
	margin-bottom: 26px ;
	z-index:1000;
	
}
.logoImg img{
/*margin:10px 0 10px 0;	*/
float:right;
z-index:999;
}
.menu-item{margin:0;}
.menu{
	margin-top:10px;

}
 .menu ul{
	 list-style-type:none;
	 float: left;
	width: 100%;
	padding:0;
 }
 .menu ul li{
	 display:inline-block;
	     padding: 1% 8% 0 0%;
}
.menu ul li img{
    margin-bottom: 20px;
}
.menu ul li a{
	padding:2% 5%; 
	font:bold 15px  roboto !important;
	color:#ffffff;
}
.menu ul li a:hover{
	color:#ffffff;
	text-decoration:none;
	cursor:pointer;
}

.mobileMenu{
	display:none;
}
.MobileItem{
		display:none;
		background:black;
		opacity:0.7;
	}
.MobileItem ul{
		list-style-type:none;
		margin-top:2%;
	}
	.mobileMenu-item li{
		text-align:left;
	}
	.mobileMenu-item li img{
		padding-right:2%;
	}
	.mobileMenu-item li a{
		color:#ffffff;
	}
	.mobileMenu-item li a:hover{
		color:#ffffff;
		text-decoration:none;
		cursor:pointer;
	}
	
/*End of banner menu*/

/*banner process icon*/
.banner-icon img{
  margin: 0% auto;
}
.image-banner,.image-bannerArrow{
	display:inline-block;
}

.image-banner{
	margin:5% 0 7% 0;
}
.image-banner p{
	margin-top:9%;
}
.image-bannerArrow{
	margin:9% 0 0% 0;
}
.image-banner p{
	color:#ffffff;
	font:bold 18px roboto !important;
	
}


/*End of banner process icon*/

/*order button*/
.orderButton{
	box-shadow:inset 0px 1px 0px 0px #ffa200;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
	background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
	background-color:#ffa200;
	border:1px solid #ffa200;
	display:inline-block;
	font:bold 30px roboto !important; 
	margin: 0px auto;
	margin-bottom:5%;	
	cursor:pointer;
	color:#ffffff;
	padding:.5% 3%;
}


     /*End of order button*/
	 
/*End of banner*/	
@media (min-width:250px) and (max-width:450px) 
{
	.logoImg img{
		float:none;
		padding:2% 1%;
	}
	.menu{
		display:none
	}
	.mobileMenu{
		display:block;
	}
	
	.mobileMenu img{
		max-width:50px;
		float:right;
		padding:2% 3% 2% 0;
		
	}
	.image-banner p{
	color:#ffffff;
	font:bold 10px roboto !important;
	}
	.banner-heading{
		font: bold 15px  roboto !important;
	}
	.banner-content{
	font: bold 15px  roboto !important;
    }
	.orderButton{
	  font:bold 18px roboto !important; 
	  
	}
	.image-banner{
	margin:0;
    }
  .image-bannerArrow{
	
	margin:0;
	padding:0;
  }
}
@media (min-width:451px) and (max-width:950px) {
	.logoImg img{
		float:none;
		padding:2% 1%;
	}
	.menu{
		display:none
	}
	.mobileMenu{
		display:block;
	}
	.mobileMenu img{
		max-width:50px;
		float:right;
		padding:6% 3% 2% 0;
		padding:0;
		
	}
	
	.image-banner p{
	color:#ffffff;
	font:bold 14px roboto !important;
	} 
	.banner-heading{
		font: bold 20px  roboto !important;
	}
	.banner-content{
	font: bold 22px  roboto !important;
    }
	.orderButton{
		font: bold 20px  roboto !important;
	}
	.image-banner{
	margin:0;
	
    }
  
}
@media (min-width:951px){
	.MobileItem{
		display:none !important;
	}
	 
}
@media (min-width:250px)and (max-width:390px)
{
	.MobileItem{
		position:absolute;
		z-index:999;
	    top:52px;
		
	}
}
@media (min-width:391px)and (max-width:500px)
{
	.MobileItem{
		position:relative !important;
		z-index:999;
	       top: 0px;
		
	}
	.MobileItem ul{
		margin-top:5%;
	}
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
     <div class="row banner">
	   <!--  <div class="col-md-12 col-sm-12 col-xs-12">-->
		   <div class="col-md-12 col-sm-12 col-xs-12 header" >
		    <div class="col-md-3 col-sm-3 col-xs-5 logoImg" >
              <img src="image/gama-logo.png" alt="logo" class="img-responsive ">		   
			</div> 
			 <div class="col-md-9 col-sm-9 menu" >
			    <ul class="menu-item">
				   <li><a><img src="image/menu-icon.png" alt=""><p>Menu</p></a></li>
				   <li><a><img src="image/byov.png" alt=""><p>What is BYOV?</p></a></li>
				   <li><a><img src="image/pickup-icon.png" alt=""><p>Pick-up Points</p></a></li>
				   <li><a><img src="image/catering-icon.png" alt=""><p>Catering</p></a></li>
				   <li><a><img src="image/outlet-icon.png" alt=""><p>Nearest Outlet</p></a></li>
				</ul>
			  </div> 
			  <div class="col-md-9 col-sm-9 col-xs-7 mobileMenu">
			    <img src="image/menuColapse.png" alt="MobileMenuIcon" class="img-responsive mobileMenuImg"> 
			  </div>
			</div>
			 <div class="col-md-12 col-sm-12 col-xs-12 MobileItem">
			   <ul class="mobileMenu-item">
				   <li><a><img src="image/menu-icon.png" alt="">Menu</a></li>
				   <li><a><img src="image/byov.png" alt="">What is BYOV?</a></li>
				   <li><a><img src="image/pickup-icon.png" alt="">Pick-up Points</a></li>
				   <li><a><img src="image/catering-icon.png" alt="">Catering</a></li>
				   <li><a><img src="image/outlet-icon.png" alt="">Nearest Outlet</a></li>
				</ul>
			 </div>
			 <div class="col-md-12 col-sm-12 col-xs-12">
		      <p class="banner-heading"><spanorder</span></p>
			  <P class="banner-content"><span>STEPS </span></P>
			 </div> 
			<div class="col-md-2 col-sm-2">
			</div>
			<div class="col-md-8 col-sm-8 col-xs-12 banner-icon">
			
			  <div class="col-md-3 col-sm-3 col-xs-3 image-banner" >
			    <img src="image/pickup.png" alt="pickup point location" class="img-responsive"> 
				<p>PICK-UP POINT</p>
			  </div>
			   <div class="col-md-1 col-sm-1 col-xs-1 image-bannerArrow">
			    <img src="image/arrow.png" alt="next step" class="img-responsive"> 
				<p></p>
			  </div>  		
			  <div class="col-md-3 col-sm-3 col-xs-3 image-banner">
			    <img src="image/select-food.png" alt="food selection" class="img-responsive">  
				<p>SELECT FOOD</p>
			  </div>	
			  <div class="col-md-1 col-sm-1 col-xs-1 image-bannerArrow">
			   <img src="image/arrow.png" alt="next step" class="img-responsive"> 
			   <p>.</p>
			  </div>  
			  <div class="col-md-3 col-sm-3  col-xs-3 image-banner">
			    <img src="image/pay-online.png" alt="payment process" class="img-responsive">
				<p>PAY</p>
			  </div>
			  <div class=" col-xs-1">
			  </div>
			</div> 
			<div class="col-md-2 col-sm-2">
			</div>
			<div class="col-md-12 col-sm-12 col-xs-12">
			 <!-- <p class="banner-button"> -->
			 <form method="post">
		  
		    <input type="submit" name="register" value="LET ME ORDER" class="orderButton">
		  
		    </form>
		  <!-- </p>-->
		  </div>
		 
		<!-- </div> -->
	 </div>
  </div>

Answer 1

只需将下面的 css 添加到您的 css 代码中。希望这就是您想要的。

---

.MobileItem{
position:absolute!重要；
边距顶部:3rem；
}