0

所以，我并不完全知道如何写标题，因为与这些关键字相关的每个谷歌搜索总是让我发现人们只想让导航栏随着页面滚动而使用position:fixed;. 这不是我想做的，但我必须说，我有点尴尬，因为我作为一名进入大学的网页设计爱好者开始了制作网站的业务。我想要发生的是我希望我网站上导航栏的子菜单显示在其他内容之上。我努力了position:fixed;在子菜单上，虽然父锚点不跟随屏幕，但当将光标悬停在屏幕的某个部分上时，即使导航栏不在，子菜单仍会从页面顶部下降 35px t 在页面上可见。我想要的只是让子菜单位于所有其他内容之上。是的，我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;
}

对于混乱的代码以及分析所有这些需要花费的时间，我深表歉意，但这并不像看起来那么糟糕。如果有人有问题或疑虑，我很乐意解释页面上发生的事情。

4

1 回答 1

0

在问题中提供的网络 ( 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-08T02:13:36.753 回答