如何在当前菜单中制作下拉菜单

Question

我目前有一个包含几个主题的导航菜单。一个主题的标题为设备。当我将鼠标悬停在它上面时，会出现 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>

如何在当前菜单中制作下拉菜单

How can I make a dropdown menu within my current menu

html

css

uinavigationbar