我一直在看这个菜单，但遇到了一个我似乎无法弄清楚的奇怪问题——感觉有点愚蠢!我希望它作为现有内容上的托盘菜单向下滑动。但是，它会向下滑动到内容下方。我似乎无法弄清楚为什么会这样。帮忙？
https://jsfiddle.net/ticklishoctopus/gdfv4wzn/
$(window).on('resize', function() {
$('ul.sub-menu').each(function() {
var width = 0;
$(this).children('li').each(function() {
width += $(this).width();
console.log('inner width' + $(this).width());
});
console.log('total width' + width);
$(this).css('padding-left', $(window).width() / 2 - width / 2);
});
});
$(window).trigger('resize');@import url(https://fonts.googleapis.com/css?family=Cabin);
html,
body {
margin: 0;
padding: 0;
font-family: Cabin, sans-serif;
text-transform: uppercase;
background-color: #ade;
}
.clear {
clear: both;
}
ul,
li {
list-style: none;
text-indent: none;
}
.menu {
width: 100%;
z-index: 50;
display: block;
background: blue;
height: 110px;
margin-top: 0px;
box-sizing: border-box;
background-image: url('images/gradient-line.png');
background-repeat: repeat-x;
background-position: left bottom;
padding-right: 30px;
}
.menu .menu-item {}
.menu .menu-item a {
display: block;
float: left;
font-size: 13pt;
line-height: 64px;
height: 100px;
font-weight: 700;
text-decoration: none;
color: #fff;
padding: 5px 30px;
margin-top: 25px;
}
.menu .menu-item .sub-menu {
position: absolute;
left: 0;
top: -50px;
z-index: -1;
transition: all .5s;
width: 100%;
}
.menu .menu-item .sub-menu li {
display: inline-block;
}
.menu .menu-item:hover .sub-menu {
top: 150px;
}
.menu .menu-item .sub-menu .menu-item a {
text-align: center;
background: rgba(155, 75, 105, .8);
padding: 0 20px;
display: block;
float: left;
color: #ddd;
border: none;
height: 64px;
font-size: 12px;
}
.menu .menu-item .sub-menu .menu-item a:hover {
color: #fff;
}
.menu .menu-item:hover .sub-menu .menu-item a {
height: 64px;
display: block;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sub-menu {
background-color: #fff;
padding-top: 30px;
padding-bottom: 20px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<ul class="menu">
<li class="menu-item"><a href="#">MENU 1 <i class="fa fa-sort-desc"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Mission</a></li>
<li class="menu-item"><a href="#">History</a></li>
<li class="menu-item"><a href="#">News & Conventions</a></li>
<li class="menu-item"><a href="#">Customer Service</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">MENU 2 <i class="fa fa-sort-desc"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Catalog</a></li>
<li class="menu-item"><a href="#">Sketches</a></li>
<li class="menu-item"><a href="#">Accessories</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">MENU 3 <i class="fa fa-sort-desc"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Catalog</a></li>
<li class="menu-item"><a href="#">Sketches</a></li>
<li class="menu-item"><a href="#">Accessories</a></li>
</ul>
</li>
</ul>
</header>
<p class="clear"></p>
<main>
Content goes here.
</main>
</body>最佳答案
如前所述，您必须将元素一直定位到子菜单。它还有助于将菜单 ul 本身包装在一个定位的 div 中，其 z-index 高于页面内容:
.header-wrapper {
position: relative;
display: block;
z-index: 1;
}
.menu {
position: relative;
width: 100%;
display:block;
background: blue;
height: 110px;
margin-top: 0px;
box-sizing: border-box;
background-image: url('images/gradient-line.png');
background-repeat: repeat-x;
background-position: left bottom;
padding-right: 30px;
}
.menu .menu-item {
position: relative;
}
.menu .menu-item a {
display: block;
position: relative;
float: left;
font-size: 13pt;
line-height: 64px;
height: 100px;
font-weight:700;
text-decoration: none;
color: #fff;
padding: 5px 30px;
margin-top: 25px;
}
关于javascript - 托盘菜单在内容后向下滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34819834/