个人中心
gpt4 book ai didi

javascript - 下拉菜单 - 与内容碰撞

转载 作者：太空宇宙 更新时间：2023-11-04 10:40:27 25 4
gpt4 key购买 nike

我已经使用 HTML、CSS 和 jQuery 制作了一个菜单，但似乎效果不佳。我认为问题在于应用于所有列表项的 float:left; 样式。如何将 float 的元素包裹在一个 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>

最佳答案

当您使用 float 时， float 元素的容器变为 0 高度，因此您必须在菜单后清除 float 

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>

关于javascript - 下拉菜单 - 与内容碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35842199/

25 4 0
文章推荐： javascript - 如何创建复选框图像库
文章推荐： python - 无法在python中使用pip安装visvis
文章推荐： Python simplejson 坐标问题
文章推荐： javascript - 如何用js动态导入css？