HTML 下拉菜单使 <div> 高度变长

Question

<分区>

Answer 1

添加 position:absolute; 到你的下拉菜单将防止下拉菜单将内容下推，你还需要 z-index 来带来下拉菜单在其他内容之上。绝对定位会忽略元素占用的空间，因此需要设置top和left来修复。 我编辑了 .menu ul li ul block 代码来修复。

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Droid Serif', serif;
  font-size: 12px;
  color: #9b9e9a;
  background: #e1ece7;
}

img {
  border: none;
}

h1 {
  font-size: 18px;
  color: #d13f31;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  text-transform: none;
}

h2 {
  font-size: 14px;
  color: #1f7872;
  font-family: 'Droid Serif', serif;
  font-weight: normal;
}

P {
  line-height: 20px;
}

a {
  text-decoration: none;
  color: #1f7872;
}

a:hover {
  color: #d13f31;
}

.mar-top30 {
  margin-top: 30px;
}

.mar-top20 {
  margin-top: 20px;
}

.mar-right30 {
  margin-right: 30px;
}

.mar-bottom20 {
  margin-bottom: 20px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearing {
  clear: both;
}

.panel {
  background: #ffffff;
}

.title {}

.content {}

.button a {
  text-decoration: none;
  display: block;
  width: 70px;
  height: 30px;
  background: #1f7872;
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
}

.button a:hover {
  background: #d13f31;
}

.page {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

.menu-wrap {
  overflow: hidden;
  background: #1a202c;
}

.menu {
  margin: 0 auto;
  width: 960px;
  height: 85px;
  margin-top: 80px;
  background-color: #0099FF;
}

.menu ul li {
  list-style: none;
  float: left;
  width: auto;
  display: inline-block;
  margin-right: -4px;
}

.menu ul li a {
  display: block;
  height: 85px;
  line-height: 85px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 14px;
  font-family: 'Oswald', sans-serif;
  color: #ffffff;
  border-right: #0099FF solid 1px;
  text-transform: uppercase;
}

.menu ul li a:hover {
  background: #e1ece7;
  color: #1a202c;
}

.menu ul li a.active {
  background: #e1ece7;
  color: #1a202c;
}

.menu ul li ul {
  position: absolute;
  padding: 0;
  top: 165px;
  left: 50;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  z-index: 99999;
}

.menu ul li ul li {
  background: #555;
  position: relative;
  z-index: 99999999;
  width: 300px;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}

.menu ul li ul li:hover {
  background: #666;
}

.menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.header {
  margin: 0 auto;
  width: 960px;
  height: 120px;
}

.logo {
  width: auto;
  float: left;
  line-height: 120px;
}

.logo h1 {
  font-size: 24px;
  color: #d13f31;
  font-weight: normal;
}

.logo h1 span {
  color: #1a202c;
}

.social {
  float: right;
  margin-top: 45px;
}

.social ul li {
  list-style: none;
  float: left;
  margin-left: 15px;
}

<div class="menu-wrap">
  <div class="menu">
    <ul>
      <li><a href="index.html" class="active">home</a>
      </li>
      <li><a href="about.html">about</a>
      </li>
      <li><a href="services.html">Disease</a>
      </li>
      <li><a href="login.html">Search</a>
      </li>
      <li><a href="#">
    Portfolio</a>
        <ul>
          <li><a href="asdqq.html">Web Design</a>
          </li>
          <li><a href="asd.html">Web Development</a>
          </li>
          <li><a href="asd.html">Illustrations</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<div class="clearing"></div>
<div class="header">
  <div class="logo">
    <h1>Title</h1>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div class="clearing"></div>