Question

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Button">Button
  <div class="FadeItem">
    <ul>
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem">
          <ul>
            <li>Sub Menu B1</li>
            <li>Sub Menu B2</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

＆＃13;

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

但是，我希望这两个项目显示在按钮＆＃34;主菜单B＆＃34;的右下角。

你知道我在代码中需要改变什么来实现这个目标吗？

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

Sample code Fiddle

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

这是一个fiddle，这是你的代码段：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
  <div class="FadeItem">
    <ul>
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem">
          <ul>
            <li>Sub Menu B1</li>
            <li>Sub Menu B2</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

在旁注中，您会注意到我必须从ul取下边距以确保事情符合要求，因此如果您当前样式表中的ul尚未重置，你可能想考虑做同样的事情。

我还在CSS中自由使用了双重调用属性，因此请确保.Button具有position:relative;属性，但其中的任何后续.Button都具有position:static;而不是。

这是为了确保子子菜单的绝对定位允许它的高度与原始.Button元素的高度一致，从而允许您毫无困难地移动鼠标指针。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
  <div class="FadeItem">
    <ul>
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem">
          <ul>
            <li>Sub Menu B1</li>
            <li>Sub Menu B2</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 3

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

css和html部分的一些变化

HTML：

<div class="Button">Button
  <div class="FadeItem">
    <ul>
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem" id="FadeItem2">
          <ul>
            <li>Sub Menu B1</li>
            <li>Sub Menu B2</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

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

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

3 个答案: