所以，我不知道如何用词来表达标题，因为与这些关键字相关的每个谷歌搜索总是让我找到那些只想使用 position:fixed; 使导航栏随页面滚动的人。 .那不是我想做的，但我必须说，作为一名进入大学的网页设计爱好者，我开始做网站的生意让我有点尴尬。我想要发生的是我想要导航栏的子菜单 on my website显示在其他内容之上。我试过position:fixed;在子菜单上，虽然父 anchor 不跟随屏幕，但当将光标悬停在屏幕的特定部分时，子菜单仍会从页面顶部下降 35px，即使导航栏不在在页面上不可见。我想要的只是让子菜单位于所有其他内容之上。是的，我试过position:relative; z-index:99;在菜单上没有运气，它停留在 z 轴的顶部。有人有主意吗？我将在下面有一段导航栏 CSS
.menu{
height:40px;
}
.menu li{
list-style:none;
float:left;
height:40px;
}
.menu li a{
display:block;
padding:15px;/*t r b l*/
line-height:30px;
text-decoration:none;
color:#F9F9F9;
-webkit-transition:color .15s linear;
-moz-transition:color .15s linear;
-o-transition:color .15s linear;
-ms-transition:color .15s linear;
transition:color .15s linear;
}
.menu li:hover > a{
color: #C00;
background:rgba(38, 38, 38, 1);
}
.menu ul{
font-weight:300;
position:absolute;/*relative positioning will turn this into a vertical nav bar, and absolute positioning will hide behind the white section below*/
opacity:0;
width:150px;
border-bottom:4px solid #C00;
box-shadow:0 .9em .9em rgba(0,0,0,0.7);
-webkit-transition:height .1s linear;
-moz-transition:height .1s linear;
-o-transition:height .1s linear;
-ms-transition:height .1s linear;
transition:height .1s linear;
}
.menu li:hover > ul{
opacity:1;
background:rgba(38, 38, 38, 1);
}
.menu ul li{
height:0;
-webkit-transition:height .1s linear;
-moz-transition:height .1s linear;
-o-transition:height .1s linear;
-ms-transition:height .1s linear;
transition:height .1s linear;
}
.menu li:hover > ul li{
font-size:10px;
width:190px;
margin-left:-40px;
background:rgba(38, 38, 38, 1);
height:30px;
border-bottom:rgba(46, 46, 46, 1) 1px solid;
border-top:rgba(30, 30, 30, 1) 1px solid;
}
.menu ul li a{
padding:0 0 0 10px;
height:inherit;
overflow:hidden;
}
对于困惑的代码以及分析所有这些代码所花费的时间，我深表歉意，但它并没有看起来那么糟糕。如果有人有任何问题或疑虑，我很乐意解释页面上发生的事情。
最佳答案
在问题 (http://aparturecreations.com/about-aparture.php) 中提供的网络中，<div>同类"bannerContent" ，即放在 <body> 之前在问题提供的网络中，有overlfow:hidden .删除它，一切都会正常工作
.bannerContent {
background: #D0D0D0;
overflow: hidden;
width: inherit;
height: inherit;
min-height: 200px;
}
应该是
.bannerContent {
background: #D0D0D0;
width: inherit;
height: inherit;
min-height: 200px;
}
已编辑:
如果您想在这种情况下保持渐变，最简单的解决方案是固定此 <div> 中的高度。而不是让它继承
.bannerContent {
background: #D0D0D0;
width: inherit;
height: 300px;
min-height: 200px;
}
关于html - 保持导航栏 float 在所有其他内容之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17518248/