如何让我的下拉子菜单宽度相同？

Question

我在CSS中实现了一个下拉菜单，但我的子菜单大小不一样。我不确定如何解决问题，因为添加width属性不起作用。

这是菜单CSS：

＆＃13;

＆＃13;

.submenu {
  display: none;
}
#navlist li:hover ul {
  display: block;
  /*used to block display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 15px;
  width: 200px;
}
#navlist li {
  list-style: none;
  margin: 0;
  height: 30px;
}
#navlist li a {
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
  background-size: 80px 60px;
  text-decoration: none;
}
#navlist li a:link {
  color: #F1F6FE;
}
#navlist li a:visited {
  color: #F1F6FE;
}
#navlist li a:hover {
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
  width: 200px;
}
#submenu li:hover {
  display: flex;
  /* display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 15px;
  width: 200px;
}

＆＃13;

<div id="navcontainer">
  <ul id="navlist">
    <li id="active">
      <a href="index.php" id="current">Home</a>
    </li>
    <li>
      <a href="#">Tools</a>
      <ul class='submenu'>
        <li><a href="hcm.php">HCM</a>
        </li>
        <li><a href="interlopers.php">Interlopers</a> 
        </li>
        <li><a href="#">SFD</a>
        </li>
        <li><a href="#">Summary report</a>
        </li>
        <li><a href="#">Age</a>
        </li>

      </ul>
    </li>
    <li> <a href="#">Data</a>
      <ul class='submenu'>
        <li><a href="#">Catalogs</a>
        </li>
        <li><a href="#">Plots</a>
        </li>
        <li><a href="papers.php">Papers</a>
        </li>
      </ul>
    </li>
    <li> <a href="about.php">About</a>
    </li>
    <li> <a href="links.php">Links</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于子菜单都有不同的大小，所以不要指定width属性。而是对所有 display: block; 标记使用a，根据内容调整宽度。

将悬停的和不悬停的submenu样式分开，以便在不使用

的情况下隐藏

#navlist li ul {
  display: none;
  /*used to block display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 1px;
}
#navlist li:hover ul {
  display: block;
}

删除margin-top以删除悬停问题

<强>演示： -

＆＃13;

＆＃13;

.submenu {
  display: none;
}
#navlist li ul {
  display: none;
  /*used to block display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 1px;
}
#navlist li:hover ul {
  display: block;
}
#navlist li {
  list-style: none;
  margin: 0;
  height: 30px;
}
#navlist > li {
  display: inline-block;
}
#navlist li a {
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../img/tab_bg.gif') bottom left repeat-x;
  background-size: 80px 60px;
  text-decoration: none;
  display: block;
}
#navlist li a:link {
  color: #F1F6FE;
}
#navlist li a:visited {
  color: #F1F6FE;
}
#navlist li a:hover {
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}
#submenu li:hover {
  display: flex;
  /* display the dropdown */
  position: absolute;
  padding: 0px;
  margin-top: 15px;
}

＆＃13;

<div id="navcontainer">
  <ul id="navlist">
    <li id="active">
      <a href="index.php" id="current">Home</a>
    </li>
    <li>
      <a href="#">Tools</a>
      <ul class='submenu'>
        <li><a href="hcm.php">HCM</a>
        </li>
        <li><a href="interlopers.php">Interlopers</a> 
        </li>
        <li><a href="#">SFD</a>
        </li>
        <li><a href="#">Summary report</a>
        </li>
        <li><a href="#">Age</a>
        </li>

      </ul>
    </li>
    <li> <a href="#">Data</a>
      <ul class='submenu'>
        <li><a href="#">Catalogs</a>
        </li>
        <li><a href="#">Plots</a>
        </li>
        <li><a href="papers.php">Papers</a>
        </li>
      </ul>
    </li>
    <li> <a href="about.php">About</a>
    </li>
    <li> <a href="links.php">Links</a>
    </li>
  </ul>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;