html - 使用 Flexbox 的固定宽度下拉菜单？

Question

我在解决这个问题时遇到了问题。我正在使用 Flexbox 构建这个导航栏。我似乎无法弄清楚如何使所有子菜单项的宽度都相同。如果您运行下面的代码，您就会明白我的意思。我试过使用属性 {flex: xxx;}控制 <li> 的宽度元素，但这并没有取得成果。我见过其他选择和理论，但没有任何效果。

探索链接中的下拉菜单是一个悬停选项。

任何和所有的指针将不胜感激!

我还打开了一个代码笔: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 a {
  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%;
}
a {
  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 is 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>

Answer 1

将 a 标签作为 block 元素，这一点足以实现您要查找的内容，否则一切正常

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