Question

我正在尝试使用子菜单创建一个下拉菜单。我几乎把事情弄得一团糟但有一点小问题。在菜单项3上有两个子菜单，每个子菜单都有一个子菜单。但是，当您将鼠标悬停在菜单项3上时，它会显示子子菜单。我需要只显示子菜单，直到你覆盖它们以扩展子子菜单。

希望这是有道理的。

这是我的代码，感谢任何帮助。

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Website Dropdown Menu</title>


  <STYLE>
    html {
      min-height: 100%;
      margin-bottom: 1px;
      overflow-y: scroll;
    }
    body {
      font-family: 'Arial, ;
 padding: 0px auto;
      margin: 0px auto;
      font-size: 8px;
      text-align: ;
      background: #a6b17a;
    }
    * {
      padding: 0px auto;
      margin: 0px auto;
    }
    #iefix {
      position: relative;
      z-index: 1000;
    }
    #container {
      width: 850px;
      height: auto;
      background-color: #fff;
      margin: 0px auto;
      padding: 0px auto;
      -webkit-box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
      box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
    }
    #menubar {
      width: 850px;
      height: 32px;
      padding: 0px auto;
      margin: 0px auto;
      background-image: url();
      background-color: #000;
    }
    #menubar ul {
      text-align: left;
      display: inline;
      margin: 0;
      list-style: none;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }
    #menubar ul a {
      color: #fff;
      text-decoration: none;
      font-size: 11.5px;
    }
    #menubar ul li {
      float: ;
      display: inline-block;
      position: relative;
      background-image: url();
      color: #fff;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      line-height: 17px;
      font-size: 12px;
      font-family: sans-serif;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 7px;
      padding-bottom: 7px
    }
    #menubar ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 11.5px;
    }
    #menubar ul li:hover {
      background-image: url();
      background: #4c7287;
      ;
      color: #fff;
    }
    #menubar ul li ul {
      box-shadow: ;
      padding: 0;
      position: absolute;
      top: 30px;
      left: 0;
      width: 200px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -transition: opacity 0.2s;
    }
    #menubar ul li ul li {
      font-size: 11.5px;
      background-image: url();
      background: #555;
      display: block;
      color: #fff;
      text-shadow: 0 -1px 0 #000;
      border-right: 1px solid black;
      border-left: 1px solid black;
      border-bottom: 1px solid black;
    }
    #menubar ul li ul li:hover {
      background-image: ;
      background: #4c7287;
    }
    #menubar ul li:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
    }
    #menubar ul ul ul {
      position: absolute;
      left: 100%;
      top: 0;
    }
    #menubarul li:hover > ul {
      display: block
    }
  </STYLE>



</head>

<body>

  <div id="container">
    <!----- START CONTAINER DIV ----->

    <div id="menubar">
      <!----- START MENUBAR DIV ----->

      <!----- START DROPDOWN MENU ----->
      <div id="iefix">

        <ul>
          <li><a href="#">Menu Item 1</a>
            <ul>
              <li><a href="#">Sub Item 1</a>
              </li>
              <li><a href="#">Sub Item 2</a>
              </li>
              <li><a href="#">Sub Item 3</a>
              </li>
              <li><a href="#">Sub Item 4</a>
              </li>
            </ul>
          </li>

          <li><a href="#">Menu Item 2</a>
            <ul>
              <li><a href="#">Sub Item 1</a>
              </li>
              <li><a href="#">Sub Item 2</a>
              </li>
              <li><a href="#">Sub Item 3</a>
              </li>
              <li><a href="#">Sub Item 4</a>
              </li>

            </ul>
          </li>
          <li><a href="#">Menu Item 3</a>
            <ul>
              <li><a href="#">Sub Item 1</a>
                <ul>
                  <li><a href="#">Sub Item 1 Item 1</a>
                  </li>
                  <li><a href="#">Sub Item 1 Item 2</a>
                  </li>
                  <li><a href="#">Sub Item 1 Item 3</a>
                  </li>
                  <li><a href="#">Sub Item 1 Item 4</a>
                  </li>
                </ul>
              </li>


              <li><a href="#">Sub Item 2</a>
                <ul>
                  <li><a href="#">Sub Item 2 Item 1</a>
                  </li>
                  <li><a href="#">Sub Item 2 Item 2</a>
                  </li>
                  <li><a href="#">Sub Item 2 Item 3</a>
                  </li>
                  <li><a href="#">Sub Item 2 Item 4</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>

          <li><a href="#">Menu Item 4</a>
            <ul>
              <li><a href="#">Sub Item 1</a>
              </li>
              <li><a href="#">Sub Item 2</a>
              </li>
            </ul>
          </li>

          <li><a href="#">Menu Item 5</a>
            <ul>
              <li><a href="#">Sub Item 1</a>
              </li>
              <li><a href="#">Sub Item 2</a>
              </li>
              <li><a href="#">Sub Item 3</a>
              </li>
              <li><a href="#">Sub Item 4</a>
              </li>
              <li><a href="#">Sub Item 5</a>
              </li>
              <li><a href="#">Sub Item 6</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Menu Item 6</a>
          </li>
          <li><a href="#">Menu Item 7</a>
          </li>
          <li><a href="#">Menu Item 8</a>
          </li>

        </ul>

        </li>

      </div>

      <!----- END DROPDOWN MENU ----->

    </div>
    <!----- END MENUBAR DIV ----->


  </div>
  <!----- END CONTAINER DIV ----->

</body>

</html>

Answer 1

只需更改此

#menubar ul li:hover  ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

到这个

#menubar ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

DEMO： https://jsfiddle.net/2Lzo9vfc/102/

子菜单不按层次顺序排列

1 个答案: