Question

我创建了一个动画导航栏。

代码是：

#nav ul li a:hover{
    color: #000033;
    background-color:#bcbceb;
    width: 200px;
    border-radius: 0 1em 1em 0;       
    transition-property: width, color, background-color;
    transition-duration: 0.5s, 0.5s, 0.5s;
    transition-timing-function: linear, ease-in, ease in; 
    -moz-transition-property: width, color, background-color;
    -moz-transition-duration:  0.5s, 0.5s, 0.5s;
    -moz-transition-timing-function: linear, ease-in, ease in; 
    -webkit-transition-property: width, color, background-color;
    -webkit-transition-duration:  0.5s, 0.5s, 0.5s;
    -webkit-transition-timing-function: linear, ease-in, ease in; 
}

这是在页面的左侧。当每个导航链接向右移动时，它会向右移动我所拥有的任何内容，而不是处于固定位置。我尝试过的位置：固定;但它似乎不起作用。

这是HTML

<ul>
    <li><h3><a href="index.html">Home</a></h3></li>
    <li><h3><a href="construction.html">Construction</a></h3></li>
    <li><h3><a href="it.html">I T Dept</a></h3></li>
    <li><h3><a href="web.html">Websites</a></h3></li>
    <li><h3><a href="cf.html">Company Forms</a></h3></li>
    <li><h3><a href="smf.html">Site Management Forms</a></h3></li>
    <li><h3><a href="phonebook.html">Phone Book</a></h3></li>
</ul>

jsFiddle

#content 
{
    position: absolute;
    border: 1px solid #000033;
    padding:50px;
    display: block;
}

Answer 1

尝试添加位置：相对于div属性，然后添加位置，例如。顶部：10px或左10px，取决于你想要它的位置，你也可以使用“底部”属性来定位它..

如何阻止在页面上移动的东西？

1 个答案: