Question

所以我正在为我的学校网站项目使用基于精灵的导航菜单，但我似乎无法想象如何移动导航栏以使其向上移动而不会拖动内容或那个方向的任何事情。

我的CSS：

nav {
    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(../images/withtext.gif) repeat-x;
    height:79px;
    }       

#nav ul {
    margin:4px 0px 0px 0px;
    padding:0px;
    list-style:none;
    }

#nav ul li {    
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    /*line-height:38px;*/
    padding:3px 50px 3px 50px;
    border-right:1px #00222a solid;
    margin:7px 0px 0px 0px;
    }   

#nav ul li a {  
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    text-decoration:none;
    }

#nav ul li a:hover {    
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    text-decoration:underline;
    }

如何将其移动？

Answer 1

使用position: relative和否定top值是一种方法：

nav {
    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(../images/withtext.gif) repeat-x;
    height:79px;
    position: relative;
    top: -10px;
}

如何在页面上进一步定位导航栏？

1 个答案: