导航栏中的子菜单：li的宽度不适合文本长度

Question

我有一个带子菜单的导航栏。问题：子菜单中li的宽度不符合文本长度。为什么呢？

ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      
      #nav-bar > li {
        float: left;
        position
      }
      
      .has-submenu {
        position: relative;
      }
      .submenu {
        position: absolute;
        
      }

<ul id="nav-bar">
      <li>Item 1</li>
      <li class="has-submenu">Item 2
        <ul class="submenu">
          <li>Subitem 1</li>    
          <li>Subitem 2</li>
        </ul>
      </li>
      <li>Item 3</li>
    </ul>

Answer 1

将white-space: nowrap;提交给.submenu li课程。

＆＃13;

＆＃13;

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

#nav-bar > li {
  float: left; 
}

.has-submenu {
  position: relative;
}
.submenu {
  position: absolute;
}
.submenu li{
  white-space: nowrap;
}

＆＃13;

<ul id="nav-bar">
  <li>Item 1</li>
  <li class="has-submenu">Item 2
    <ul class="submenu">
      <li>Subitem 1</li>    
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为子菜单绝对定位所以它只需要它所需的最小宽度。正如ankita patel所说，给它white-space: nowrap会解决它。

Answer 3

问题是你的.submenu＆gt; li元素宽度是从父元素计算的。

设置父元素宽度将解决该问题（即.has-submenu）。