菜单中淡入淡出项的结构和设计

Question

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation_desktop">
<div class="button_desktop_01">1.0 Main Menu
<div class="FadeItem_01">
<ul>
<li>1.1 Sub Menu </li>
<li class="button_desktop_02">1.2 Sub Menu
<div class="FadeItem_02">
<ul>
<li>1.2.1 Sub Menu</li>
<li>1.2.2 Sub Menu</li>
</ul> 
</div>
</li> 
</ul>
</div>
</div>
<div class="button_desktop_01">2.0 Main Menu
<div class="FadeItem_01">
<ul>
<li class="button_desktop_02">2.1 Sub Menu
<div class="FadeItem_02">
<ul>
<li>2.1.1 Sub Menu</li>
<li>2.1.2 Sub Menu</li>
<li>2.1.3 Sub Menu</li>
</ul> 
</div>
</li> 
<li>2.2 Sub Menu </li>
</ul>
</div>
</div>  
</div>

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

j查询：

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

上面的代码淡入/淡出一些菜单。<div class="FadeItem_02">下的项目显示在<div class="FadeItem_01">下的项目旁边。到目前为止，所有这些都完美运行。

我现在想实现<div class="FadeItem_02">下的项目与button_desktop_01(1.0主菜单(或button_desktop_02(2.0主菜单(的大小完全匹配。

现在他们看起来非常接近看起来并不专业的<div class="FadeItem_01">。

为了实现这一点，我必须在 CSS 中更改什么？

您也可以在此处找到代码：https://jsfiddle.net/gng5dcLc/4/

Answer 1

在这里，您可以提供解决方案 https://jsfiddle.net/gng5dcLc/6/

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

由于您在CSS中使用left，这就是我将left更新为 *110%** 至100%的原因

希望这对您有所帮助。

Answer 2

你可以添加CSS

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

检查这个