Jquery 结构及；菜单中FadeItems的设计

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>

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

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

jQuery:

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

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

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

上面的代码显示了一些菜单。

下的项目显示在

下的项目旁边。到目前为止，所有这些都非常有效

现在我想实现

下的项目与

按钮桌面\u 01

（1.0主菜单）或

按钮桌面\u 02

（2.0主菜单）的大小完全匹配

现在，它们看起来非常接近

，这看起来并不专业

要实现这一点，我需要在CSS中做哪些更改

您也可以在这里找到代码：

您可以添加css

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

---

检查

给你一个解决方案

由于您在

CSS

中使用

left

，因此我将

left

更新为*110%**至100%

---

希望这能对您有所帮助。

你好，Shiladitya，谢谢您的回答。看起来不错。顺便问一下，在CSS中使用“left”好吗？或者你知道更好的方法吗？@Michi。。。如果将位置指定为

绝对

，则需要指定

左

和

顶

，这样您就可以使用任何解决方案。试用

slideDown

和'slideUp'，而不是

fadeIn

和

fadeOut

。也看看这个。非常感谢你的帮助。滑动/向下滑动看起来也不错。