jquery - 在悬停在下拉列表中的 上时创建子菜单。就像 Udemy 网站下拉菜单一样

Question

大家好，当我将鼠标悬停在 <li> 上时，我想要一个子菜单列表但我试过但没有得到代码。这是例子

$("#giri").on("click", function() {
  $(".classic").fadeToggle(1000)
});

$(".checkit").on("mouseenter", function() {
  $(".trying").fadeToggle(1000)
});

.classic {
  margin-top: 0.6%;
  display: none;
  position: absolute;
  height: 470px;
  min-width: 270px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
  z-index: 3;
  border: 1px solid rgba(40, 0, 30, 0.2);
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  color: #555;
  background: #4CA1AF;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #C4E0E5, #4CA1AF);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #C4E0E5, #4CA1AF);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: 'Lobster Two', cursive;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navbar-brand" href="#"><i class="fa fa-apple" id="giri">
            <div class="classic">
                <ul id="helpo">
                  <li id="macas" class="hot checkit"><i class="fa fa-angle-right fa-pull-right"></i> Go and Skate</li>
                   <hr id="break2"> 
                    
                    
                  <li id="macas" class="hot checkit"><i class="fa fa-angle-right fa-pull-right"></i> Join Ninos group now..</li>
                   <hr id="break2">
                    
                  <li id="macas"><i class="fa fa-angle-right fa-pull-right"></i> Buy some new laptops</li>
                   <hr id="break2">
                    
                  <li id="macas"><i class="fa fa-angle-right fa-pull-right"></i> View Laptop settings </li>
                   <hr id="break2">
              </ul>
           </div>                

    </i> APPLE</a>

我要构建的内容与中的下拉菜单一样 ( https://www.udemy.com )

Answer 1

您可以使用纯 CSS 实现此目的。只需指定子元素仅在父元素悬停时可见。

body {
  font-family: Arial;
}

span:hover > ul {
  display: block;
}
span > ul {
  display: none;
  margin: 0;
  padding: 0;
}
span > ul li {
  display: block;
  width: 200px;
  height: 30px;
  position: relative;
  border-bottom: 1px solid grey;
}
span > ul li > ul {
  display: none;
  position: absolute;
  left: 200px;
  top: 0px;
  background-color: #73AC21;
  color: white;
  border-bottom: 1px solid white;
}
span > ul li:hover > ul {
  display: block;
}

<span>Nav
<ul>
  <li>Test
  <ul>
    <li>subtest</li>
    <li>subtest</li>
  </ul>
  </li>
  <li>Test2
  <ul>
    <li>subtest2</li>
    <li>subtest2</li>
  </ul></li>
</ul>
</span>