出现在菜单按钮(不位于下方)旁边的子菜单 [英] Appearing of Sub Menus right next to a menu button (not below)

问题描述

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

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

如您所见，上面的简单代码淡入/淡出某些项目的内容. 到目前为止，所有这些方法都可以正常运行.当您将鼠标悬停在主菜单B"按钮上时，子菜单"B1"和"B2"会出现在<主菜单B 下方.

As you can see the simple code above fades in/out the content of some items. All this works perfectly so far. When you hover over the button "Main Menu B" the Sub Menus "B1" and "B2" appear below the "Main Menu B".

但是，我希望这两个项目显示在主菜单B"按钮的右下.

However, I want that those two items appear right next of the button "Main Menu B".

您知道要实现此目标我需要在代码中进行哪些更改?

Do you have any idea what I have to change in my code to achieve this?

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

I tried with display: inline-block but could not make it work.

示例代码小提琴

Sample code Fiddle

推荐答案

一种简便的方法是利用您的position规则.

An nice and easy way of doing this would be to make use of your position rules.

像这样:

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

这是一个小提琴，这是您的摘录:

Here's a fiddle, and here's your snippet:

$(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，则可能需要考虑做同样的事情.

On a side note, you will notice that I had to take the margin off the ul to make sure things fall in line, so if your ul in your current stylesheet has not been reset, you might want to consider doing the same.

我还广泛使用了CSS内部的双重调用属性，因此请确保.Button具有position:relative;属性，但是其中的任何后续.Button都具有position:static;.

I've also made liberal use of double calling properties inside the CSS so ensure that .Button has a position:relative; property, but any subsequent .Button inside of it has position:static; instead.

这是为了确保子菜单的绝对位置允许其高度与原始.Button元素的高度一致，从而使您可以轻松地移动鼠标指针.

This is to ensure that absolute positioning of the sub-sub menu allows it's height to conform to the height of the original .Button element and thereby allowing you to move your mouse-pointer in without any hassle.

这篇关于出现在菜单按钮(不位于下方)旁边的子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！