更改导航以向左展开

Question

导航栏目前下拉，第一个子菜单向左展开，第二个子菜单向右展开，使其位于主菜单的顶部。试图让第二个子菜单继续向左扩展，但我所做的任何调整都不会改变它。试图让 ul 最后一个孩子在没有成功的情况下向右拉，将不胜感激。这是我目前得到的代码。

HTML：

<li {{#id}}id="{{id}}"{{/id}}
class="wsite-menu-subitem-wrap {{#is_current}}wsite-nav-current{{/is_current}}"
>
<a
    {{^nonclickable}}
        {{^nav_menu}}
            href="{{url}}"
        {{/nav_menu}}
    {{/nonclickable}}
    {{#target}}
        target="{{target}}"
    {{/target}}
    class="wsite-menu-subitem"
    >
    <span class="wsite-menu-title">
        {{{title_html}}}
    </span>{{#has_children}}<span class="wsite-menu-arrow">&gt;</span>{{/has_children}}
</a>
{{#has_children}}{{> navigation/flyout/list}}{{/has_children}}

<div class="wsite-menu-wrap" style="display:none">
    <ul class="wsite-menu">
        {{#children}}{{> navigation/flyout/item}}{{/children}}
    </ul>
</div>

CSS：

/* Navigation Menu*/

#nav {position: relative;}
 #nav ul {
  text-align: right;
  overflow: hidden;
}

#nav ul li {
  list-style: none;
  display: inline-block;
}

#nav ul li a {
  display: block;
  color: #8e8e8e;
  padding: 30px 15px;
  font-size: 14px;
  text-transform: uppercase;
  -webkit-transition: all 240ms linear;
      -moz-transition: all 240ms linear;
      -o-transition: all 240ms linear;
      -ms-transition: all 240ms linear;
      transition: all 240ms linear;
}

.minimize #nav ul li a {
  padding: 15px;
}

#nav > ul li:first-child a {
  padding-left: 30px !important;
}

#nav > ul li:last-child a {
  padding-right: 0 !important;
}

#nav ul li#active a,
#nav ul li a:hover {
  color: @primary;
  text-decoration:none;
  border: 0;
}

#mobile-nav, #mobile-input, #nav-trigger, #mobile-cart {
  display: none;
}

/* Navigation Submenu*/

#wsite-menus {
  position: relative;
  z-index: 14;
}

#wsite-menus .wsite-menu {
  padding: 10px 0;
  background: @headerBg;
  -webkit-box-shadow: 0px 0px 3px rgba(99, 99, 99, .1);
  box-shadow: 0px 0px 3px rgba(99, 99, 99, .1);
}

#wsite-menus > .wsite-menu-wrap > .wsite-menu .wsite-menu-wrap {
  position: absolute !important;
  top: 0 !important;
  margin-top: -10px !important;
}

#wsite-menus .wsite-menu li a {
  font-family: 'Roboto', sans-serif;
  color: #8e8e8e;
  background: transparent !important;
  font-size:13px;
  text-transform: uppercase;
  border: 0;
  padding: 10px 20px;
}

#wsite-menus .wsite-menu li a > span {
  padding: 0;
}

#wsite-menus .wsite-menu li a:hover {
  color: @primary;
}

#wsite-menus .wsite-menu-arrow {
  right: 20px;
  width: 10px;
  overflow: hidden;
}

#wsite-menus .wsite-menu-arrow:before {
  display: inline-block;
  content: '\25b6';
  font-size: 75%;
  vertical-align: top;
  line-height: 1.5;
}

Answer 1

尝试将菜单的容器元素设置为display: flex; 和flex-direction: column;。这样子元素将永远不会彼此相邻。

---

编辑：

忘记flex。

我假设您需要将 nav 放在右侧（这就是您希望将子菜单放在左侧的原因），并且您需要一次一个到 display 的子菜单。

假设，我已经做了一个例子，所以你可以看到它的工作原理。

注意：只需检查评论的样式，其他内容只是视觉效果，以匹配您的上下文并易于浏览。

* {
  margin: 0;
  padding: 0;
}

#root {
  display: flex;
}

nav {
  margin-left: auto;
  margin-right: 100px;
  background-color: rgb(30, 30, 30);
  color: white;
  width: 160px;
}

li {
  list-style: none;
  padding: 4px;
}

li:hover {
  background-color: rgb(90, 90, 90);
}

a {
  cursor: pointer;
}


/* dropdown box */

.dropdown {
  position: relative;
}


/* dropdown button, it's just a span, 
you can use whatever you want */

.dropdown .dropdown_btn {}


/* dropdown content default */

.dropdown .dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  /* "left -100%" gives same result as "right: 100%"*/
  left: -100%;
  /* keep size to mach the "left -100%" */
  min-width: 100%;
  background-color: rgb(60, 60, 60);
}


/* while mouse hover, content will display */

.dropdown:hover .dropdown-content {
  display: block;
}

<div id="root">
  <nav>
    <ul>
      <li><a>Item 1</a></li>
      <li class="dropdown">
        <span class="dropdown-btn">Item 2 / Drop A</span>
        <ul class="dropdown-content">
          <li><a>Drop A Item 1</a></li>
          <li><a>Drop A Item 2</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <span class="dropdown-btn">Item 3 / Drop B</span>
        <ul class="dropdown-content">
          <li><a>Drop B Item 1</a></li>
          <li><a>Drop B Item 2</a></li>
        </ul>
      </li>
      <li><a>Item 4</a></li>
    </ul>
  </nav>
</div>