我现在在网站上有一个导航栏和一个div。 div稍微覆盖了导航栏，但是当我调整窗口大小时，它完全覆盖了导航栏。我希望它总能涵盖一些导航栏，但不能完全覆盖。
的HTML
<body>
<div id="wrapper">
<ul>
<li class="nav"><a href="#">Home</a></li>
<li class="nav"><a href="#">About Me</a></li>
<li class="nav"><a href="#">Projects</a></li>
<li class="nav"><a href="#">Resume</a></li>
<li class="nav"><a href="#">Contact</a></li>
</ul>
<div id="bod">
<h1 class="title">Home</h1>
</div>
</div>
</body>
的CSS
#bod {
height: 100%;
width: 86%;
background-color: #F4F3EE;
position: absolute;
top: 0px;
right: 0px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;}
.nav {
border: 1px solid #F4F3EE;
width:20%;
height:100px;
color: #F4F3EE;
margin: 2px 0px 0px 10px;
text-align: left;
font-family: Tahoma, Geneva, sans-serif;
font-size: 30px;
padding: 0px 0px 5px 0px;
list-style-type: none;
border-radius: 5px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;
box-shadow: inset 1px 2px 4px #F4F3EE;
-moz-box-shadow: inset 1px 2px 4px #F4F3EE;
-webkit-box-shadow: inset 1px 2px 4px #F4F3EE;
background: #b58aa5;
background: -moz-linear-gradient(top, #ad8599 1%, #b58aa5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ad8599), color-stop(100%,#b58aa5));
background: -webkit-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -o-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -ms-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: linear-gradient(to bottom, #ad8599 1%,#b58aa5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad8599', endColorstr='#b58aa5',GradientType=0 );
的JavaScript
$(document).ready(function() {
$('.nav').mouseenter(function() {
$(this).animate({marginLeft: '-=20px'}, 100);
$(this).addClass('.nav1');
});
$('.nav').mouseleave(function() {
$(this).animate({marginLeft: '+=20px'}, 100);
});
});
我一辈子都无法弄清楚该怎么做，以确保在调整窗口大小时用户仍然可以看到导航。
最佳答案
在left: 200px;上设置#bod，将对其进行修复。然后，您也可以摆脱在width: 86%;上设置的#bod。您绝对要定位#bod，这意味着#bod从常规流程中移出并变成了自己的东西。现在，您可以设置top，left，bottom和right，以指定网页两侧和#bod之间的间隔。如果在bottom: 0px;上设置#bod，则在height: 100%;上也不需要#bod。