Question

我使用HTML，CSS和jQuery创建了一个菜单，但似乎效果不佳。我认为问题在于float:left;样式应用于所有列表项。如何将一个div中剩余的项目包装起来，防止它与内容冲突？

我尝试将display:block;应用于项目，但这个陷入困境的下拉菜单。

$('document').ready(function() {
  $('li').hover(function() {
    $(this).find('ul>li').slideToggle(200);
  });
});

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  z-index: 1000;
}

ul li {
  float: left;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ff0000;
}

ul li a {
  text-decoration: none;
  color: white;
}

ul li li {
  background-color: #999999;
  display: none;
  z-index: 1000;
}

ul li li:hover {
  background-color: #555555;
}

a {
  width: 100%;
  height: 100%;
  display: block;
}

.test {
  z-index: 1;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
  <ul>
    <li><a href="#">home</a>
      <ul>
        <li><a href="#">podlink1</a>
        </li>
        <li><a href="#">podlink2</a>
        </li>
        <li><a href="#">podlink3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">kontakty</a>
      <ul>
        <li><a href="#">podlink1</a>
        </li>
        <li><a href="#">podlink2</a>
        </li>
        <li><a href="#">podlink3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">linki</a>
    </li>
    <li><a href="#">about</a>
    </li>
  </ul>
  <div class="test">
    finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum
  </div>
</body>

</html>

Answer 1

当您使用浮动时，浮动物品的容器变为0高度，因此您必须在菜单后清除浮动

ul:after {
   clear: both;
   content: "";
   display: table;
}

所以你的代码变成了

$('document').ready(function() {
  $('li').hover(function() {
    $(this).find('ul>li').slideToggle(200);
  });
});

ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

  z-index: 1000;

}
ul:after {
   clear: both;
   content: "";
   display: table;
}
ul li {

  float: left;

  width: 100px;

  height: 30px;

  line-height: 30px;

  text-align: center;

  background-color: #ff0000;

}

ul li a {

  text-decoration: none;

  color: white;

}

ul li li {

  background-color: #999999;

  display: none;

  z-index: 1000;

}

ul li li:hover {

  background-color: #555555;

}

a {

  width: 100%;

  height: 100%;

  display: block;

}

.test {

  z-index: 1;

}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
  <ul>
    <li><a href="#">home</a>
      <ul>
        <li><a href="#">podlink1</a>
        </li>
        <li><a href="#">podlink2</a>
        </li>
        <li><a href="#">podlink3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">kontakty</a>
      <ul>
        <li><a href="#">podlink1</a>
        </li>
        <li><a href="#">podlink2</a>
        </li>
        <li><a href="#">podlink3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">linki</a>
    </li>
    <li><a href="#">about</a>
    </li>
  </ul>
  <div class="test">
    finibus eget. Duis sed mi sodales, scelerisque odio nec, hendrerit lorem. Curabitur vehicula lorem neque, sed semper urna posuere ultricies. Donec rutrum
  </div>
</body>

</html>

下拉菜单 - 与内容相关

1 个答案: