title: How can I make my dropdown submenus the same width?
body: <p>I have a drop down menu implemented in CSS, but my submenus are not all the same size. I'm not sure how to fix the problem, because adding the width property does not work. </p>
  
  <p>Here is the menu CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="navcontainer"&gt;
    &lt;ul id="navlist"&gt;
      &lt;li id="active"&gt;
        &lt;a href="index.php" id="current"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Tools&lt;/a&gt;
        &lt;ul class='submenu'&gt;
          &lt;li&gt;&lt;a href="hcm.php"&gt;HCM&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="interlopers.php"&gt;Interlopers&lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;SFD&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Summary report&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Age&lt;/a&gt;
          &lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt;Data&lt;/a&gt;
        &lt;ul class='submenu'&gt;
          &lt;li&gt;&lt;a href="#"&gt;Catalogs&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Plots&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="papers.php"&gt;Papers&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt; &lt;a href="about.php"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt; &lt;a href="links.php"&gt;Links&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>