title: Make vertical dropdown same width as main menu
body: <p>I tried to make a dropdown submenu (in this case 'Products') which has the same width as the mainmenu. The hover/active background colour should cover the entire width of the menu. It seems to be confined to stay within the above laying table. </p>
  
  <p>Is there a way to expand towards the borders as well?</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>html,
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .mainmenu li:hover .submenu {
    display: inherit;
    max-height: 200px;
    line-height: 25px;
  }
  
  .submenu {
    overflow: hidden;
    max-height: 0;
    width: 100%;
    -webkit-transition: all 0.5s ease-out;
  }
  
  .easyflexMenu {
    width: 150px;
    height: 500px;
    float: left;
    color: #ffffff;
    background-color: #229dfc;
    border-radius: 5px;
    /*bolling van de hoeken*/
    padding: 10px;
  }
  
  .easyflexMenu a {
    margin: -10px;
    padding: 10px 10px 5px 15px;
    width: 145px;
    height: 50px;
    display: block;
    text-decoration: none;
    line-height: 25px;
    color: #ffffff;
    background-color: #229dfc;
  }
  
  .easyflexMenu a:active {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .easyflexMenu a:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
  
  .easyflexMenu ul {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    list-style-type: none;
  }
  
  ul,
  menu,
  dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="efmainmenu" class="easyflexMenu"&gt;
    &lt;nav class="navigation"&gt;
      &lt;ul class="mainmenu"&gt;
        &lt;li class="home"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="about"&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li class="products"&gt;&lt;a href=""&gt;Products&lt;/a&gt;
          &lt;ul class="submenu"&gt;
            &lt;li&gt;&lt;a href=""&gt;Tops&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;Bottoms&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;Footwear&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="contact"&gt;&lt;a href=""&gt;Contact us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>