javascript - 带有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>