Appearing Of Sub Menus Right Next To A Menu Button (not Below)

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 '

Solution 1:

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

Like this:

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

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

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.

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.

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.

Solution 2:

As everything is nested you could go one after another down towards tree using CSS > selector and then using transform change it position.

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

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

Solution 3:

I have tried doing the same, check out my link: https://jsfiddle.net/djmayank/8omsq7ah/

few changes in css and html part

HTML:

<divclass="Button">Button
  <divclass="FadeItem"><ul><li>Main Menu A </li><liclass="Button">Main Menu B
        <divclass="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);
  });
});