html – CSS位置绝对和父容器的宽度百分比

前端之家收集整理的这篇文章主要介绍了html – CSS位置绝对和父容器的宽度百分比前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试构建一个宽度宽的HTML / CSS下拉菜单.由于位置:绝对为第二级导航,我没有得到第一级的宽度.删除位置:绝对将移动所有以下元素在悬停…

我该如何解决

这是代码

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.level_1 > li {
  float: left;
  width: 45%;
  background-color: #2FA4CF;
  margin-right: 6px;
}

.level_1 > li:hover ul {
  display: block;
}

.level_2 {
  display: none;
  position: absolute;
  width: 45%;
}

.level_2 li {
  background-color: #535B68;
}
<ul class="level_1">
  <li>
    <a href="#">Level one (1)</a>
    <ul class="level_2">
      <li><a href="#">Level two (1)</a></li>
    </ul>
  </li>
  <li><a href="#">Level one (2)</a></li>
</ul>

<p>Paragraph</p>

看到这里的结果:http://jsfiddle.net/5uf2Y/
悬停“一级(1)”,您将看到,第二级与第一级不一样大小…

解决方法

您已经忘记了显示100%的两个元素.

Correction here

第一个元素忘记它是:
相对于level_1的位置>里

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

它的第二个元素是:
改变二号的大小

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

在.level_2上使用“width:100%”,它会自动转换为其父级的宽度

原文链接:https://www.f2er.com/html/231158.html

猜你在找的HTML相关文章