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;
}
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 一些菜单上面的代码。 <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/
最佳答案
给您一个解决方案 https://jsfiddle.net/gng5dcLc/6/
.FadeItem_02 {
position: absolute;
left: 110%;
top: 0;
width: 130px;
}
由于您在 CSS
中使用 left
,这就是为什么我将 left
更新为 *110%** 到 100%
希望对您有所帮助。
关于jquery - 菜单中 FadeItems 的结构和设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45648868/