Question

我正在尝试使用带有下拉列表的flexbox导航菜单来显示某些菜单。出于某种原因，在悬停时，下拉列表显示在我正在悬停的容器的右侧。我想让他们在下面显示，就像一个普通的导航菜单。

这是一个codepen： http://codepen.io/anon/pen/XbmaBY

HTML：

$('.cbStopReason > input[type=checkbox]').on('change', function () {
    var $this = $(this);
    $this.parent().nextAll("input").prop("disabled", !$this.is(':checked'));
});

萨斯：

<nav id="nav">
  <ul class="nav-flex">
    <li class="nav-brand-flex">
      <a href=""><img src="img.png" \></a>
    </li>
       <li class="nav-link-flex nav-flex-dropdown">
       <a href="">Dropdown 1</a>
       <div>
         <ul>
           <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
          <li><a href="#">Link 6</a></li>
        </ul>
      </div>
    </li>
    <li class="nav-link-flex nav-flex-dropdown">
       <a href="">Dropdown 2</a>
      <div>
         <ul>
           <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </div>
    </li>
    <li class="nav-link-flex">
      <a href="">Regular 1</a>
    </li>
    <li class="nav-link-flex">
      <a href="">Regular 2</a>
    </li>
    <li class="nav-link-flex">
      <a href="">Regular 3</a>
    </li>
  </ul>
</nav>

任何帮助都会非常感激，因为我无法弄清楚为什么他们会向右而不是在下面。

Answer 1

这是因为flex-direction的默认值是flex-direction: row。您想通过将flex-direction: column;添加到.nav-link-flex来覆盖此内容。所以，它应该是：

.nav-link-flex { display: flex; padding: 0 12.5px; position: relative; flex-direction: column; // <-- add this line in your scss ... 举例来说，我已将其添加到a fork of your pen。

Flexbox Nav下拉不在容器下

1 个答案: