title: Flexbox Drop Down Menu width
body: <p>Here is my issue... my drop down menu works great but I'm getting complaints that when you hover over Research the drop downs are not as wide as the parents. The drop down menu uses flexbox to change sizes as the viewport changes making it responsive like. I for one cant seem to get them to expand their width. If anyone can figure this out I would be very appreciated. </p>
  
  <p>CSS/HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#hprcc-header-menubar {
      background-color: #DBE3BC;
      text-align: center;
      z-index: 9999;
  }
  nav ul {
      margin: 0;
      padding: 0;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  }
  nav ul li {
      list-style: none;
      background-color: #DBE3BC;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#DBE3BC));
      background-image: -webkit-linear-gradient(top, #F5F5F5, #DBE3BC);
      background-image: -moz-linear-gradient(top, #F5F5F5, #DBE3BC);
      background-image: -o-linear-gradient(top, #F5F5F5, #DBE3BC);
      background-image: linear-gradient(to bottom, #F5F5F5, #DBE3BC);
      position: relative;
      -webkit-flex: 1 0 auto;
      -moz-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
      flex: 1 0 auto;
  }
  nav ul li:hover {
      background-color: #C1C2BA;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#C1C2BA), to(#9E9E9E));
      background-image: -webkit-linear-gradient(top, #C1C2BA, #9E9E9E);
      background-image: -moz-linear-gradient(top, #C1C2BA, #9E9E9E);
      background-image: -o-linear-gradient(top, #C1C2BA, #9E9E9E);
      background-image: linear-gradient(to bottom, #C1C2BA, #9E9E9E);
  }
  nav ul li a {
      text-decoration: none;
      color: #F26D6D;
      font: 1.5em sans-serif;
      display: block;
      border: .1em #B3B87F solid;
  }
  nav ul li:hover a {
      color: #FFF;
  }
  nav ul li ul {
      position:absolute;
      top:-999em;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-flex-flow: column wrap;
      -moz-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
      flex-flow: column wrap;
      justify-content: space-around;
  }
  nav ul li:hover ul {
      top: auto;
      z-index: 9999;
  }
  nav ul li ul li {
      background: #C1C2BA;
  }
  nav ul li a:visited {
      color: #F26D6D;
      text-decoration:none;
  }
  nav ul li:hover a:visited {
      color: #FFF;
  }
  @supports (not ((flex-flow) or (-webkit-box-flow) or (-moz-box-flow) or (-ms-flexbox-flow) or (-webkit-flex-flow))) {
      nav ul {
          -webkit-flex-direction: row;
          -moz-flex-direction: row;
          -ms-flex-direction: row;
          flex-direction: row;
      }
      nav ul li ul {
          -webkit-flex-direction: column;
          -moz-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
      }
  }
  nav ul li a:visited {
      color: #F26D6D;
      text-decoration:none;
  }
  nav ul li:hover a:visited {
      color: #FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hprcc-header-menubar"&gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Highlights &amp; Activities&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Personnel&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;External Resources&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Services&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Online Data Services&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Full Service&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Grant Funding&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Outreach&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Research&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Publications&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Climate Data&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Climod2/Classic&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Maps&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Graphs&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;StationSearch Tool&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Climate Information&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Climate Change&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Climate Impact Reporter&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Summaries&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Monthly Webinars&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle
  <a href="http://jsfiddle.net/deadpickle/KCk9y/1/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/deadpickle/KCk9y/1/embedded/result/</a></p>