html - 导航栏中的子菜单 : li's width doesn't fit the text length

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 类。

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;
}

<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>