CSS - 如何创建动态宽度为子菜单

Question

很多人都试图制作导航栏，但在大多数情况下，子菜单的宽度是静态的，如this example

我要做的是使宽度动态化。 在我的例子中，子菜单的名称将来自MySQL，因此所有子菜单都将动态确定。

例如，如果有3个子菜单，最长的子菜单有3个字符，则子菜单的宽度为3个字符长。但是，如果有另外一个有6个字符的菜单，我希望所有子菜单的宽度都比这宽两倍。

我认为这可以通过width属性100%来完成，但它没有按预期工作。

以下是我的一些编码。

#menu {}
/*1st level*/

#menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 100%;
  float: left;
  background-color: #0c0c0c;
}
/*1st level items*/

#menu ul li {
  position: relative;
  float: left;
  text-align: center;
  padding: 10px 20px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
/*2nd level list*/

#menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  width: 100%;
}
/*2nd items*/

#menu ul li ul li {
  position: relative;
  padding: 10px 20px;
  text-align: left;
  display: block;
  width: 100%;
}
/*3rd level list*/

#menu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 70%;
  width: 100%;
  list-style: none;
}
/*3rd level items*/

#menu ul li ul li ul li {
  position: relative;
  text-align: left;
  display: block;
  width: 100%;
}
/*When the 1st level items are hovered, the 2nd livel list is shown*/

#menu ul li:hover >ul {
  display: block;
}
/*Hovered itemes will be in a different collor*/

#menu ul li a:hover {
  color: #00FFCC;
}
/*When the 2nd level items are hovered, the 3rd livel list is shown*/

#menu ul li ul li:hover >ul li {
  display: block;
}
/*This is what happens when items are hovered*/

#menu li a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
}

<div id="menu">
  <!-- 1st level menu-->
  <ul>
    <li><a href="#">Patterns</a>
      <!-- 2nd level menu-->
      <ul>
        <li><a href="#">Event</a>
          <!-- 3rd level menu-->
          <ul>
            <?php while ($data=m ysqli_fetch_array($result_event)) { if($data[ 'Category']=="Event" ){ ?>
            <li>
              <a href="pattern.php?PatternName=<?php echo $data['PatternName']; ?>">
                <?php echo $data[ 'PatternName']; ?>
              </a>
            </li>
            <?php } } ?>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

以下图片是导航栏的工作原理。

底线“基于表单的事件捕获”是第3级菜单中最长的，因此同一级别中所有菜单的宽度应该是此行。

如果您愿意提供任何见解，我将不胜感激。

PS

您可能会注意到第3个left的{​​{1}}属性为70％。如果是100％，则第二个ul和第三个ul之间会有差距。 我想知道你们有没有看到我做错了什么。