我已经尝试了所有可以在 Google 上找到的解决方案,但不知何故,所有关于 z-index 的信息都不起作用:(。这是我第一次使用这个网站,如果我的内容看起来很乱,请原谅我.
问题 1:https://www.dropbox.com/s/jr5wew27ydv7hcl/Screen%20Shot%202013-12-16%20at%2011.57.01%20pm.png
问题 2:https://www.dropbox.com/s/7ffztfq7iezc4ao/Screen%20Shot%202013-12-16%20at%2011.57.50%20pm.png
我自己的 CSS 表
.header{
width:960px;
height:99px;
font-family:'Francois One', sans-serif;
text-transform:uppercase;
z-index:9999px;}
<!--this holds the css menu bar-->
.banner, #slidermain {
width:960px;
height:328px;}
<!--this holds the nivo slider-->
.slidermain {
background-color:#399;
margin-bottom:10px;}
Nivo slider CSS 表
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
float:left;
z-index:10px;
}
.nivoSlider img {
position: relative;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
如果 css 菜单位置设置为相对位置,它会起作用,但下拉菜单会将 nivo slider 向下推以适合其大小,导致其他表格也向下移动。但是一旦鼠标离开菜单栏,nivo slider 就会调整到原来的位置。
/* user menu settings */
.ddmenu {
display: block;
padding:5px;
text-align:center;
width: 110px;
margin: 0 auto;
margin-top:45px;
position: relative;
cursor: pointer;
background: #fff;
font-size: 1.2em;
color: #656565;
font-weight: normal;
float: left;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.ddmenu:hover { color: #898989; }
.ddmenu.open {
background: #5a90e0;
color: #fff;
border-left-color: #6c6d70;
position:relative;
z-index:200px;
}
.ddmenu ul {
position: relative;
top: 100%;
left: -1px; /* move content -1px because of container left border */
width: 200px;
z-index:200px;
padding: 10px;
display: none;
border-left: 4px solid #8e9196;
background: #fff;
list-style:none;
text-decoration:none;
text-align:left;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
如有任何帮助,我们将不胜感激!谢谢!
最佳答案
尝试对第一级菜单使用相对位置,并为第二级菜单添加绝对位置,因此:'home, services, event, information, about us, contact' 必须具有相对位置,对于另一个 ul,其中:'about sana,合作伙伴的位置绝对正确,一切都会好起来的。
关于javascript - 隐藏在 Nivo slider 后面的 CSS 菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20615402/