在菜单按钮旁边出现子菜单（不在下面）

$(document).ready(function() { $(".Button").mouseenter(function() { $(this).children(".FadeItem").fadeIn(500); }); $(".Button").mouseleave(function() { $(this).children(".FadeItem").fadeOut(500); }); }); 

 .Button { float: left; } .FadeItem { display: none; } 

  
Button 
 
 
Main Menu A 
 
Main Menu B 
 
 
Sub Menu B1
 
Sub Menu B2
 
 
 
 
 
  

正如您所看到的，上面的简单代码淡入/淡出了某些项目的内容。 到目前为止，这一切都很完美。 当您将鼠标hover在“主菜单B”按钮上时，子菜单“B1”和“B2”将出现在“主菜单B” 下方 。

但是，我希望这两个项目出现在“主菜单B”按钮的旁边 。

您是否知道我需要在代码中更改哪些内容才能实现此目的？

我尝试使用display: inline-block但无法使其正常工作。

示例代码小提琴

Answer 1

这样做的一个简单方法就是利用你的position规则。

像这样：

 .Button { float: left; position: relative; } .Button .Button { position: static; } .FadeItem { display: none } .FadeItem .FadeItem { position: absolute; left: 100%; top: 0; width: 130px; height: 100%; } ul { margin: 0; list-style: none; padding: 0; } 

这是一个小提琴 ，这是你的片段：

 $(document).ready(function() { $(".Button").mouseenter(function() { $(this).children(".FadeItem").fadeIn(500); }); $(".Button").mouseleave(function() { $(this).children(".FadeItem").fadeOut(500); }); }); 

  .Button { float: left; position: relative; } .Button .Button { position: static; } .FadeItem { display: none } .FadeItem .FadeItem { position: absolute; left: 100%; top: 0; width: 130px; height: 100%; } ul { margin: 0; list-style: none; padding: 0; } 

  
Button 
 
 
Main Menu A 
 
Main Menu B 
 
 
Sub Menu B1
 
Sub Menu B2
 
 
 
 
 
  

Answer 2

因为所有东西都是嵌套的，你可以使用CSS >选择器一个接一个地向树下去，然后使用transform改变它的位置。

 $(document).ready(function() { $(".Button").mouseenter(function() { $(this).children(".FadeItem").fadeIn(500); }); $(".Button").mouseleave(function() { $(this).children(".FadeItem").fadeOut(500); }); }); 

 .Button { float: left; } .FadeItem { display: none; } .Button > .FadeItem > ul > .Button > .FadeItem { transform: translate(60%, -100%); } 

  
Button 
 
 
Main Menu A 
 
Main Menu B 
 
 
Sub Menu B1
 
Sub Menu B2
 
 
 
 
 
  

Answer 3

我试过这样做，看看我的链接： https ： //jsfiddle.net/djmayank/8omsq7ah/

css和html部分的变化很少

HTML：

 
Button 
 
 
Main Menu A 
 
Main Menu B 
 
 
Sub Menu B1
 
Sub Menu B2
 
 
 
 
 
  

CSS：

 .Button { float: left; } .FadeItem { display: none; } #FadeItem2{ margin-top:-20px; margin-left:90px; } 

JS：

 $(document).ready(function() { $(".Button").mouseenter(function() { $(this).children(".FadeItem").fadeIn(500); }); $(".Button").mouseleave(function() { $(this).children(".FadeItem").fadeOut(500); }); });