我的 WOW 滑块出现问题,向下滚动时菜单位于其下方而不是上方。
我能做些什么来解决这个问题?我似乎试图将 z-index: 100 甚至 99999 应用于菜单/导航栏,它仍然在它之下。
http://i.stack.imgur.com/EmfU4.png
<div class="navigation stick">
<div id="menu">
<div class="nav">
<li><a href="#frontpage">Frontpage</a></li>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact Me</a></li>
</div>
</div>
</div>
<div id="textcontainer">
<div id="textbox">
Here is a overview of my current and previous projects. Click on the picture to get more information.
</div>
<div id="slider_container">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="img/projects/c17_big.jpg" title="City 17"/>A roleplay gamemode for testing.</li>
<li><img src="img/projects/heartbit_big.jpg" title="HeartBit Roleplay"/>HeartBit Roleplay</li>
<li><img src="img/projects/tb_big.jpg" title="TigerBit"/>TigerBit</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="slider_engine/wowslider.js"></script>
<script type="text/javascript" src="slider_engine/script.js"></script>
</div>
和代码的CSS:
.nav{
height: 60px;
width: 100%;
padding-top: 20px;
font-family: "Open Sans Condensed";
font-weight: bold;
font-size: 2em;
text-transform: uppercase;
display: table;
text-align: center;
margin: auto;
}
.nav li{
display: table-cell;
width: 1420px;
float: none;
}
.nav li a{
color: white;
}
.nav li a:hover{
height: 30px;
background-color: transparent;
color: orange;
}
#slider_container{
margin-bottom: 100px;
z-index: 1;
}