Question

我目前有一个包含一些主题的导航菜单。一个主题有titel设备。当我将鼠标悬停在其上方时，Throwables和Gear出现。这是我目前拥有的，我想将鼠标悬停在Throwables或Gear上时打开另一个菜单。我尝试了不同的操作，例如在Gear的li之间添加另一个ul或li，但是每次我尝试诸如此类的操作时，我的孔菜单都会变得很奇怪。我在YouTube / Google上进行了搜索，但无法按照我的要求运行。

简而言之：将鼠标悬停在Throwables或Gear上时，我需要另一个下拉菜单。当我将鼠标悬停在Here is an example of how it's supposed to look上时，它需要向右打开并具有相同的蓝色（菜单的其余部分位于“设备”的左侧）

菜单代码的一部分：

.navigatie_menu{
  position: absolute;
  left: 505px;
  top: 95px;
  z-index: 2;
}

ul {
  padding: 0px;
  list-style: none;
  color: black;
}

ul li {
  float: left;
  width: 130px;
  height: 40px;
  background: rgba(223,223,223,0.95);
  line-height: 40px;
  text-align: center;
  font-size: 17px;
  color: black;
}

    ul li a {
  text-decoration: none;
  color: black;
  display: block; 
}

ul li a:hover {
  background-color: #94bfea;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

 <ul class="navigatie_menu">
  <li><a>Equipment</a>
    <ul>
      <li><a href="Equipment/Gear.html">Gear</a></li>
      <li><a href="Equipment/Throwables.html">Throwables</a></li>
    </ul>
  </li>			
</ul>

Answer 1

类似的东西吗？

        .navigatie_menu {
            position: absolute;
            left: 505px;
            top: 95px;
            z-index: 2;
        }

        ul {
            padding: 0px;
            list-style: none;
            color: black;
        }

        ul li {
            float: left;
            width: 130px;
            height: 40px;
            background: rgba(223, 223, 223, 0.95);
            line-height: 40px;
            text-align: center;
            font-size: 17px;
            color: black;
        }

        ul li a {
            text-decoration: none;
            color: black;
            display: block;
        }

        ul li a:hover {
            background-color: #94bfea;
            display: block;
        }

        ul li ul li {
            display: none;
        }

        ul li:hover ul li {
            display: block;
        }

        .sub_menu1 {
            position: absolute;
            left: 130px;
            display: none;
        }

        .sub_menu2 {
            position: absolute;
            left: 130px;
            display: none;
        }


        .gear:hover .sub_menu1 {
            display: block;
        }

        .throwables:hover .sub_menu2 {
            display: block;
        }

<body>
    <ul class="navigatie_menu">
        <li><a>Equipment</a>
            <ul>
                <li class="gear"><a href="Equipment/Gear.html">Gear</a>
                    <ul class="sub_menu1">
                        <li><a href="#">subject1</a></li>
                        <li><a href="#">subject2</a></li>
                        <li><a href="#">subject3</a></li>
                        <li><a href="#">subject4</a></li>
                    </ul>
                </li>
                <li class="throwables"><a href="Equipment/Throwables.html">Throwables</a>
                    <ul class="sub_menu2">
                        <li><a href="#">subject1</a></li>
                        <li><a href="#">subject2</a></li>
                        <li><a href="#">subject3</a></li>
                        <li><a href="#">subject4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>

如何在当前菜单中创建下拉菜单

1 个答案: