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

因此，我不完全知道如何标题的标题，因为每个谷歌搜索相对于这些关键字总是让我只有人想让导航栏滚动页面使用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; 
}

一个片段我不道歉有关的代码的混乱和时间，将采取分析所有的金额，但它不是那么糟糕，因为它看起来。如果有人有任何问题或疑虑，我会很乐意解释页面上发生的事情。

来源

2013-07-08 lotem_kw

难道你不能添加一些图纸/草图来解释你的想法吗？ –

我在帖子中包含了一个受影响的页面。当您将鼠标悬停在父标签上时，子标签隐藏在内容的其余部分之后。我只是希望它能在其他内容的顶部 –

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

来源

2013-07-08 02:13:36 user688877

我喜欢这个，但是我在身体内容上方有一个奇怪的银色渐变条，你是否也会为此修复这个问题？并感谢你。那正是我在寻找 –

啊，我现在明白了。非常感谢！非常感谢！ –

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

回答

相关问题