Question

我遇到了解决这个问题的问题。我正在使用Flexbox构建此导航栏。我似乎无法弄清楚如何使所有子菜单项具有相同的宽度。如果你运行下面的代码，你可以看到我的意思。我尝试使用属性{flex: xxx;}来控制<li>元素的宽度，但这并不富有成效。我已经看过其他选择和理论，但没有什么可以解决的问题。

“探索”链接中的下拉菜单，是一个可收回的选项。

任何和所有指针都将非常感激！

我还打开了一个codepen：Codepen version

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将一个标签作为一个块元素，这一件事就足以实现你所寻找的东西，否则一切都很好。

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

Flexbox的固定宽度下拉菜单？

1 个答案: