css

Question

我找到的脚本可以使我的菜单像

我找到了一些脚本，但是子菜单会左对齐，而不是像这样。

<div id="menu-container">
              <ul class="menu" style="background-color:#1DBAA5;">
                <li  style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" >
                        <a href="#" style="color:#fff">
                            <span>TEST</span>
                        </a>
                      <ul class="dropdown-menu" id="menu1" style="background:#111;width:600px">
                        <li>
                          <a href="#" style="color:#fff">TEST</a>
                        </li>
                        <li><a href="#" style="color:#fff">TEST</a></li>
                        <li><a href="#" style="color:#fff">TEST</a></li>
                        <li><a href="#" style="color:#fff">TEST</a></li>
                      </ul>
                    </li>
                </ul>
            </div>

我的css

.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
}

 .menu{
  max-width: 600px;
  }

  .menu>li{
  }

.dropdown-menu li {
 width: 30%;
 display: inline-block;

 }

Answer 1

试试这个。它将与左侧对齐

我为同样的尺寸更改了<ul class="dropdown-menu" id="menu1" style="background:#111;width:475px">的值。您可以根据自己的意愿进行更改。

它们将用于左侧位置对齐

.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
}

.menu{
 max-width: 600px;
 padding-top:10px;
 }

.menu>li{
 display: inline;
 padding-left: :20px;
 }

 .dropdown-menu li {
  width: 30%;
  display: inline-block;

  }

<div id="menu-container">
              <ul class="menu" style="background-color:#1DBAA5;">
                <li  style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" >
                        <a href="#" style="color:#fff">
                            <span>TEST</span>
                        </a>
                      <ul class="dropdown-menu" id="menu1" style="background:#111;width:475px">
                        <li> <a href="#" style="color:#fff">TEST</a></li>

                        <li><a href="#" style="color:#fff">TEST</a></li>
                        <li><a href="#" style="color:#fff">TEST</a></li>
                        <li><a href="#" style="color:#fff">TEST</a></li>
                      </ul>
                    </li>
                </ul>
            </div>

Answer 2

此部分.dropdown-menu .sub-menu尚未包含在您的代码中