在鼠标hover在下拉列表中的上创建子菜单。 就像Udemy网站下拉菜单一样

大家好我想hover在

时有一个子菜单列表，但我已经尝试但没有得到代码。 这是一个例子

 $("#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; } 

   
 
 
 Go and Skate
 
 
 Join Ninos group now..
 
 
 Buy some new laptops
 
 
 View Laptop settings 
 
 
 
  APPLE 

我想要构建的内容与（ https://www.udemy.com ）中的下拉菜单相同

Answer 1

你可以用纯CSS来实现这一点。 只需指定子元素仅在父元素hover时才可见。

 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; } 

 Nav 
 
Test 
 
subtest
 
subtest
 
 
 
Test2 
 
subtest2
 
subtest2
 
 
  

Answer 2

 $("#giri").on("mouseenter",function(){ $(".classic").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; } 

  APPLE  
 
 
 Go and Skate
 
 
 Join Ninos group now..
 
 
 Buy some new laptops
 
 
 View Laptop settings