如何摆脱悬停下拉菜单旁边的空白区域？

时间：2018-05-29 03:41:50

标签： html css

我必须使用Dreamweaver设计一个“Rent A Flat”网站作为学校作业，我很难找到错误。我在悬停下拉菜单中添加了视差设计，但它将所有这些空白区域留在菜单旁边，并将图像放在菜单下方。以下是我网站的代码。我不知道该怎么办了。我尝试了我能想到的一切。 

body, html{
  height:100%;
  margin:0;
  font-size:16px;
  font-family:"Lato", sans-serif;
  font-weight:400;
  line-height:1.8em;
  color:#666;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #06106E;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
    display: inline-block;
}

.dropdown:hover .dropbtn {
    background-color: #06106E;
}

.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6{
  position:relative;
  opacity:0.70;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}

.pimg1{
  background-image:url('../Renting A House/Homepage/Image/pexels-photo-932095.jpeg');
  min-height:100%;
}

.pimg2{
  background-image:url('../Renting A House/Homepage/Image/agenda-appointment-business-1020323.jpg');
  min-height:400px;
}

.pimg3{
  background-image:url('../Renting A House/Homepage/Image/pexels-photo-1061576.jpeg');
  min-height:400px;
}

.pimg4{
  background-image:url('../Renting A House/Homepage/Image/Use instead of checkout.jpeg');
  min-height:400px;
}

.pimg5{
  background-image:url('../Renting A House/Homepage/Image/pexels-photo-276641.jpeg');
  min-height:400px;
}

.pimg6{
  background-image:url('../Renting A House/Homepage/Image/stairs-home-loft-lifestyle.jpg');
  min-height:100%;
}

.section{
  text-align:center;
  padding:50px 80px;
}

.section-light{
  background-color:#000040;
  color:#ddd;
}

.section-dark{
  background-color:#282e34;
  color:#ddd;
}

.ptext{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
}

.ptext .border{
  background-color:#778899;
  color:#000;
  padding:20px;
}

.ptext .border.trans{
  background-color:#C0C0C0;
}

@media(max-width:568px){
  .pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6{
    background-attachment:scroll;
  }
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Renting Your First Flat</title>
	<link href="../Website Style.css" rel="stylesheet" type="text/css">
	<link rel="icon" href="../house-key.png">
	<div>Icons made by <a href="https://www.flaticon.com/authors/roundicons" title="Roundicons">Roundicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</head>
<body>
	<div class="dropdown">
		<button class="dropbtn"><input type="image" width="30px" height="30px" src="../Burger Dropdown Icon Menu.png" class="burger-menu"/></button>
		<div class="dropdown-content">
    	<a href="#">Link 1</a>
    	<a href="#">Link 2</a>
    	<a href="#">Link 3</a>
    	</div>
	</div>
	
	<div class="pimg1">
		<div class="ptext">
			<span class="border">
				Renting A Flat
			</span>
		</div>
	</div>
	
	<section class="section section-light">
		<h2>Introduction?</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eveniet dicta saepe mollitia nobis. Deleniti ratione dolor quas tempora quasi necessitatibus ipsa iusto voluptatibus sed veniam cum labore, excepturi reprehenderit odit accusamus dignissimos in modi culpa delectus, velit saepe repellat distinctio atque magnam quis. Accusantium enim voluptate quo delectus eveniet alias tempore temporibus maiores. Numquam, nostrum omnis vero dicta laboriosam ratione nisi pariatur veniam officiis quaerat dignissimos, sint cum obcaecati, sunt accusantium. Alias suscipit repellat mollitia, laboriosam, doloribus totam numquam sapiente quidem itaque eveniet iure sunt earum obcaecati vel! Vero quod unde officiis sit in facilis sed praesentium rem molestias.
		</p>
		<p>
			<a href="#">About Us</a>
		</p>
	</section>
	
	<div class="pimg2">
		<div class="ptext">
			<span class="border trans">
				Money
			</span>
		</div>
	</div>
	
	<section class="section section-dark">
		<h2>Rent, Afford to Leave, Buy Furniture, Insurance, Flatmate to Share Costs</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima explicabo perferendis, quo eaque facilis architecto aut qui esse, eveniet, magnam ratione voluptatum aspernatur. Facere nemo ut aut alias commodi consequuntur ipsa sed eveniet. Accusamus animi tempore obcaecati blanditiis veniam, quaerat perferendis inventore exercitationem expedita, dolorem dolores quod cupiditate laborum incidunt autem distinctio, quisquam labore explicabo delectus molestiae? Delectus aperiam quis quae at consequatur iusto corrupti! Voluptatibus, fuga. Fugiat, numquam, rerum! Porro aliquam temporibus adipisci facere harum labore.
		</p>
	</section>
	
	<div class="pimg3">
		<div class="ptext">
			<span class="border trans">
				The Ins And Outs
			</span>
		</div>
	</div>
	
	<section class="section section-dark">
		<h2>What Do You Need To Know?</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ab maiores, dicta porro, omnis commodi corrupti quisquam nobis odit amet provident in quos libero deserunt non aut nesciunt ducimus laboriosam architecto ipsam quod repellat, incidunt animi sapiente cumque. Cumque, tempora expedita ab laborum. Possimus voluptatem dolorum ea magni facere, quod, atque vitae! Nemo consequuntur laboriosam maiores soluta consequatur culpa nulla maxime impedit inventore laborum voluptatibus eveniet molestiae quaerat suscipit adipisci repudiandae voluptatem iusto deserunt error architecto, ipsam nihil accusantium, cumque est vero. Impedit facilis aperiam hic eius voluptate rem atque numquam consequuntur, earum suscipit vero asperiores voluptates doloremque, laudantium temporibus.
		</p>
	</section>
	
	<div class="pimg4">
		<div class="ptext">
			<span class="border trans">
				Availability
			</span>
		</div>
	</div>
	
	<section class="section section-dark">
		<h2>What To Look For/Available Flats?</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam quidem laudantium animi aut dolor distinctio cumque voluptate placeat iste esse eligendi, tempora accusantium repellat provident, mollitia cupiditate incidunt quasi perferendis alias laborum suscipit facere adipisci et facilis fugit. Quo sunt eos nam nulla nihil voluptates eius blanditiis consequuntur fuga, officia quaerat repellat, qui non repudiandae alias quod quis nostrum porro quia suscipit mollitia. Natus repudiandae fugiat sed enim vel repellat eligendi aperiam dolores necessitatibus suscipit iste dicta iusto dolorum quia, rerum, impedit, eum facilis? Quos vel consequuntur consectetur debitis, sed corporis quibusdam molestiae id quas. Dolore corporis aliquam a optio!
		</p>
	</section>
	
	<div class="pimg5">
		<div class="ptext">
			<span class="border trans">
				The Makings of a Flat
			</span>
		</div>
	</div>
	
	<section class="section section-dark">
		<h2>Furnishing Your Flat?</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis beatae reprehenderit, voluptatibus molestias odio doloribus minima vitae amet temporibus ab voluptatum adipisci ut nemo at possimus voluptates quae sit ea accusantium quidem quibusdam velit error asperiores ipsam, quam. Quia, iure at, sequi sit earum vero cupiditate est hic laboriosam atque voluptatem tempora modi enim fugiat, esse dolorem incidunt deserunt quidem eveniet, odio omnis. Officia iusto quod, enim soluta eos optio commodi ab. Quasi accusamus porro explicabo, a ducimus, amet labore alias atque consequatur molestiae, eius temporibus adipisci assumenda voluptas minus perspiciatis? Id rem quisquam explicabo fuga esse ipsum provident quo!
		</p>
	</section>
	
	<div class="pimg6">
		<div class="ptext">
			<span class="border">
				Real Estate
			</span>
		</div>
	</div>
	
<div>Icons made by <a href="https://www.flaticon.com/authors/cole-bemis" title="Cole Bemis">Cole Bemis</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

这是我的尝试我不确定是你想要的。任何更改让我知道。我已经将menubox移到了背景图像的顶部。

我将.dropdown和.pimg1包装为div 

<div class="header-wrapper">
  <div class="dropdown">
    <button class="dropbtn"><input type="image" width="30px" height="30px" src="http://placeholder.pics/svg/30" class="burger-menu"/></button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="pimg1">
    <div class="ptext">
      <span class="border">
	    Renting A Flat
	  </span>
    </div>
  </div>
</div>

css 

.header-wrapper{
  clear: both;
  position: relative;
}

.dropdown {
    position: absolute;
    display: inline-block;
    z-index: 2;
}

实时链接：https://codepen.io/anon/pen/QxLReY?editors=1100

相关问题
最新问题