使用Flexbox固定寬度的下拉菜單？

Question

我在解決這個問題上遇到了問題。 我正在使用Flexbox構建此導航欄。 我似乎無法弄清楚如何使所有子菜單項都具有相同的寬度。 如果運行下面的代碼，您會明白我的意思。 我嘗試使用屬性{flex: xxx;}來控制<li>元素的寬度，但這並未取得成果。 我看過其他選擇和理論，但對於它如何卻沒有用。

“瀏覽”鏈接中的下拉菜單是一個可懸停的選項。

任何和所有的指針將不勝感激！

我也為此打開了一個Codepen： Codepen版本

 * { 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 {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 25px;
  display: block;
}