Change navigation to expand left

Question

Navigation bar presently drops down, 1st sub menu expands left, 2nd sub menu expands right so that it's on top of the primary menu. Trying to get the 2nd sub menu to continue expanding left, but any tweaks I make don't change it. Tried to get the ul last child to pull right without success, would appreciate any help. Here's the code I've currently got.

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

Try setting the menu's container element to display: flex; and flex-direction: column;. This way child elements will never be one next to the other.

---

Edit:

Forget the flex.

I'll suppose you need to put your nav to the right (that's why you want submenus to the left), and you need submenus to display one at a time.

Assuming that, I've made an example so you can see it working.

Note: Just check the commented style, other things are just visuals to match your context and to be easy to scan.

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