固定寬度Flexbox的下拉菜單？

Question

我有一個問題搞清楚這一點。我正在用Flexbox構建這個導航欄。我似乎無法弄清楚如何使所有子菜單項目的寬度都一樣。如果你運行下面的代碼，你可以看到我的意思。我試過使用{flex: xxx;}屬性來控制<li>元素的寬度，但這並沒有成果。我已經看到了其他的選擇和理論，但沒有任何作用。

探索鏈接中的下拉列表，並且是一個可選項。

任何和所有的指針將非常感謝！

我也有一個codepen在這個開放：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); 
 
\t background: -o-linear-gradient(left, #fff, ##34495e); 
 
\t background: -moz-linear-gradient(left, #fff, ##34495e); 
 
\t 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 { 
    color: #fff; 
    text-decoration: none; 
    text-transform: uppercase; 
    padding: 25px; 
    display: block; 
}