html - Fixed width Dropdown menu with Flexbox? -

i having issue figuring out. i'm building navbar flexbox. can't seem figure out how make of submenu items same width. if run code below can see mean. i've tried using property {flex: xxx;} control width of <li> elements, has not been fruitful. i've seen other options , theories nothing works how have it.

the dropdown in in explore link , hoverable option.

any , pointers appreciated!

i have codepen open on this: codepen version

* {    margin: 0;    padding: 0;  }  body {    padding: 0;    margin: 0;    font-family: 'helvetica neue', helvetica;    background: grey;    background: -webkit-linear-gradient(left, #000, #fff);    background: -o-linear-gradient(left, #000, #fff);    background: -moz-linear-gradient(left, #000, #fff);    background: linear-gradient(left, #000, #fff);  }  nav {    background: #000;    display: flex;    /* background: -webkit-linear-gradient(left, #fff, ##34495e);  	background: -o-linear-gradient(left, #fff, ##34495e);  	background: -moz-linear-gradient(left, #fff, ##34495e);  	background: linear-gradient(left, #fff, ##34495e); */  }  nav ul {    list-style: none;  }  nav ul {    background: #000;  }  nav ul a:hover {    background: #16a085;  }  nav > ul ul {    position: absolute;    visibility: hidden;  }  nav > ul {    display: flex;  }  nav ul li:hover > ul {    visibility: visible;  }  nav ul ul li {    position: relative;  }  nav ul ul ul {    position: absolute;    top: 0;    left: 100%;  }  {    color: #fff;    text-decoration: none;    text-transform: uppercase;    padding: 25px;    display: inline-block;  }  .logo {    text-decoration: none;    color: #fff;    font-size: 0.9rem;    text-transform: uppercase;    letter-spacing: 3px;  }  .main-nav-links {    margin-left: auto;    display: flex;  }

<nav>      <a href="#0" class="logo">seejax</a>      <ul class="main-nav-links">      <li><a href="#0">explore&nbsp;<i class="fa fa-chevron-down" aria-hidden="true"></i></a>        <ul class="nav-dropdown">          <li><a href="#0">categories</a>            <ul class="nav-dropdown">              <li><a href="#0">nightlife</a>              </li>              <li><a href="#0">parks</a>              </li>              <li><a href="#0">family fun</a>              </li>              <li><a href="#0">food</a>              </li>              <li><a href="#0">entertainment</a>              </li>              <li><a href="#0">recreation</a>              </li>            </ul>          </li>          <li><a href="#0">area</a>            <ul class="nav-dropdown">              <li><a href="#0">northside</a>              </li>              <li><a href="#0">westside</a>              </li>              <li><a href="#0">southside</a>              </li>              <li><a href="#0">eastside</a>              </li>              <li><a href="#0">beaches</a>              </li>              <li><a href="#0">orange park</a>              </li>            </ul>          </li>        </ul>      </li>      <li><a href="#0">what seejax?</a>      </li>      <li><a href="#0">blog</a>      </li>      <li><a href="#0">add listing</a>      </li>      <li><a href="#0">log in/register</a>      </li>    </ul>  </nav>      <footer>  </footer>

make tag block element, 1 thing enough achive looking otherwise fine working

a {   color: #fff;   text-decoration: none;   text-transform: uppercase;   padding: 25px;   display: block; }