Html 更改导航以向左展开

导航栏立即下拉，第一个子菜单向左展开，第二个子菜单向右展开，使其位于主菜单的顶部。试图让第二个子菜单继续向左扩展，但我所做的任何调整都不会改变它。试图让ul最后一个孩子恢复正常，但没有成功，如果有任何帮助，我们将不胜感激。这是我目前掌握的代码

HTML:

---

尝试将菜单的容器元素设置为

display:flex和
弯曲方向：列。这样子元素就永远不会是一个挨着另一个


编辑：

忘记
flex

我假设您需要将
nav
置于右侧（这就是为什么您希望子菜单位于左侧），并且您需要子菜单来
一次显示一个

假设是这样，我举了一个例子，这样你就可以看到它在工作

注意：只需检查注释样式，其他内容只是视觉效果，以匹配您的上下文并易于扫描


*{
保证金：0；
填充：0；
}
#根{
显示器：flex；
}
导航{
左边距：自动；
右边距：100px；
背景色：rgb（30,30,30）；
颜色：白色；
宽度：160px；
}
李{
列表样式：无；
填充：4px；
}
李：悬停{
背景色：rgb（90,90,90）；
}
a{
光标：指针；
}
/*下拉框*/
.下拉列表{
位置：相对位置；
}
/*下拉按钮，它只是一个跨度，
你想用什么就用什么*/
.dropdown.dropdown_btn{}
/*下拉内容默认值*/
.下拉列表.下拉列表内容{
显示：无；
位置：绝对位置；
z指数：1；
排名：0；
/*“left-100%”给出的结果与“right:100%”相同*/
左-100%；
/*将尺寸保持在“左-100%”马赫数*/
最小宽度：100%；
背景色：rgb（60,60,60）；
}
/*鼠标悬停时，将显示内容*/
.下拉：悬停.下拉内容{
显示：块；
}


项目1

项目2/A

删除项目1
删除第2项



项目3/B

删除B项1
删除B项2


项目4

尝试将菜单的容器元素设置为
显示：flex和
弯曲方向：列。这样子元素就永远不会是一个挨着另一个


编辑：

忘记
flex

我假设您需要将
nav
置于右侧（这就是为什么您希望子菜单位于左侧），并且您需要子菜单来
一次显示一个

假设是这样，我举了一个例子，这样你就可以看到它在工作

注意：只需检查注释样式，其他内容只是视觉效果，以匹配您的上下文并易于扫描


*{
保证金：0；
填充：0；
}
#根{
显示器：flex；
}
导航{
左边距：自动；
右边距：100px；
背景色：rgb（30,30,30）；
颜色：白色；
宽度：160px；
}
李{
列表样式：无；
填充：4px；
}
李：悬停{
背景色：rgb（90,90,90）；
}
a{
光标：指针；
}
/*下拉框*/
.下拉列表{
位置：相对位置；
}
/*下拉按钮，它只是一个跨度，
你想用什么就用什么*/
.dropdown.dropdown_btn{}
/*下拉内容默认值*/
.下拉列表.下拉列表内容{
显示：无；
位置：绝对位置；
z指数：1；
排名：0；
/*“left-100%”给出的结果与“right:100%”相同*/
左-100%；
/*将尺寸保持在“左-100%”马赫数*/
最小宽度：100%；
背景色：rgb（60,60,60）；
}
/*鼠标悬停时，将显示内容*/
.下拉：悬停.下拉内容{
显示：块；
}


项目1

项目2/A

删除项目1
删除第2项



项目3/B

删除B项1
删除B项2


项目4

谢谢，我似乎无法阅读flexbox。有什么想法吗？很抱歉这些新手的问题，在过去的一个小时里，我一直在尝试不同的语法，但都没有用。谢谢，我似乎无法阅读flexbox。有什么想法吗？抱歉，这些新手的问题，在过去的一个小时里，我一直在尝试不同的语法，但都没有用。
<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>

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