0

我现在在网站上有一个导航栏和一个 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);
    });
});

我一生都无法弄清楚如何确保在调整窗口大小时用户仍然可以看到导航。

4

1 回答 1

0

设置left: 200px;上#bod，这将解决它。然后，您也可以摆脱设置的width: 86%;which #bod。你是绝对定位#bod的，#bod就是脱离常规流程，变成自己的东西。现在您可以设置top、left和来指定网页两侧bottom和. 如果你设置了，你也不需要。right#bodbottom: 0px;#bodheight: 100%;#bod

于 2013-05-02T01:31:14.507 回答