css - 当父级具有相对定位时，悬停菜单的最大宽度被忽略

Question

当父元素是相对元素时，绝对定位元素的宽度受到限制

我有一个导航栏，悬停时有一个菜单。菜单将包含标签，标签中文本的长度会有所不同。

我希望菜单具有最小宽度和最大宽度，子 div 必须将最小宽度/最大宽度设置为。但无论菜单的宽度如何，都被限制在最小宽度点。

是否可以让子 div 忽略父 div 的宽度，同时仍然保持子 div(我不能将其移出父 div，我知道这是一个简单的解决方案)？

这是我遇到的行为示例:https://codepen.io/vee1234/pen/omQxWP

.navBar {
  background-color: #222;
  width: 50px;
  min-height: 100%;
  height: 100vh;
}

.navItem {
  color: #a1a1a1;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}

.menu {
font-family: "Open Sans", sans-serif;
  position: absolute;
  display: none;
  min-width: 200px;
  max-width: 600px;
  background-color: #333;
  z-index: 100;
  left: 100%;
  top: 20%;
}

.menu div a {
  display:block;
  border: 1px solid red;
}

.navItem:hover .menu {
  display: block;
}

 <div class="navBar">
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
     <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div className="menu">
        <div className="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
  </div>

Answer 1

一个技巧是通过添加一些 padding-right 使相对元素更大，这不会影响文本在内部的方式，但会被计算在绝对元素的宽度计算中。然后只给你想要的部分上色。您还可以添加负边距以纠正添加的填充。

.menu {
  width:50px;
  padding-right:500px;
  margin-right:-500px;
  background:#000 content-box;
  height:100px;
  position:relative;
  color:#fff;
}

.menu div{
  position:absolute;
  top:0;
  left:50px;
  background:blue;
  min-width:200px;
  max-width:500px;
}
.menu div a {
  border:1px solid;
  display:block;
}

<div class="menu">
 some text here
  <div>
    <a>some text here</a>
    <a>some text here some text here some text here some text here some text here some text here some text here some text here</a>
    <a>some text here</a>
  </div>
</div>