Question

所以，我并不完全知道如何标题，因为每个谷歌搜索相对于这些关键字总是引导我只想让导航栏使用position:fixed;滚动页面。这不是我想要做的，但我必须说我有点尴尬，我开始做一个网站作为网络设计爱好者进入大学的企业。我想要发生的是，我希望导航栏on my website的子菜单显示在其他内容之上。我在子菜单上尝试position:fixed;，虽然父锚点不跟随屏幕，但当将光标悬停在屏幕的某个部分上时，子菜单仍然会从页面顶部掉落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;
}

我为代码的混乱和分析所有内容所花费的时间道歉，但它并没有看起来那么糟糕。如果有人有疑问或担忧，我会很乐意解释页面上发生的事情。

Answer 1

在问题（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;
}

保持导航栏浮动在所有其他内容之上

1 个答案: