Структура и дизайн FadeItems в меню

HTML:

  

CSS:

 .button_desktop_01{ float: left; position: relative; padding-left: 1%; padding-right: 1%; cursor: pointer; } .button_desktop_02 { float: left; position: relative; padding-left: 1%; padding-right: 1%; cursor: pointer; } .FadeItem_01, .FadeItem_02 { display: none } .FadeItem_02 { position: absolute; left: 100%; top: 0; width: 130px; } ul { margin: 0; list-style: none; padding: 0; } 

JQuery:

 $(document).ready(function() { $(".button_desktop_01, .button_desktop_02").mouseenter(function() { $(this).children(".FadeItem_01, .FadeItem_02").fadeIn(500); }); $(".button_desktop_01, .button_desktop_02").mouseleave(function() { $(this).children(".FadeItem_01, .FadeItem_02").fadeOut(500); }); }); 

Код выше FadeIn / Out некоторых меню. Элементы, находящиеся под

отображаются рядом с элементами под

. Все это прекрасно работает до сих пор.

Теперь я хочу, чтобы элементы, находящиеся под

точно совпадали с размером button_desktop_01 (Главное меню 1.0) или button_desktop_02 (главное меню 2.0) .

Сейчас они очень близки к

которые на самом деле не выглядят профессионально.

Что мне нужно изменить в моем CSS для этого?

Вы также можете найти здесь код: https://jsfiddle.net/gng5dcLc/4/

Здесь вы найдете решение https://jsfiddle.net/gng5dcLc/6/

 .FadeItem_02 { position: absolute; left: 110%; top: 0; width: 130px; } 

Поскольку вы используете left в CSS , поэтому я обновил left до * 110% ** до 100%

Надеюсь, что это поможет вам.

вы можете добавить css

 .FadeItem_02 ul { padding-left: 12%; /* whatever style you want*/ } 

проверьте это