Question

当下拉菜单展开时，HTML中的div高度会变长。我是CSS的新手。下拉菜单名称为Action act = () => Status = newStatus; App.Current.Dispatcher.Invoke(act);。当我将光标移入其中时，我的HTML页面变得更长。

portfolio

* {
  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 {
  padding: 0;
  top: 48px;
  left: 0;
  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;
}

小提琴：

https://jsfiddle.net/darcychan/moyhthnd/

Answer 1

将position:absolute;添加到您的下拉菜单会阻止下拉菜单推送内容，您还需要z-index将下拉菜单置于其他内容的顶部。绝对定位将忽略元素占用的空间，因此，您需要设置top和left来修复它。 我修改了.menu ul li ul广告代码来修复。

* {
  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>

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

1 个答案: