CSS导航和背景图像

Question

我有CSS导航

.navigation{
    float:right;
    width:718px;
    background-image:url('http://inauguralseason.com/images/nav.png');
}

.navigation ul {
    float: right;
    list-style-type: none;
    margin: 0;
}

.navigation li {
    float: left;
}

.navigation ul a {
    color: #FFF;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

但是我没有出现背景图片，当我删除这一行

时

.navigation li {
    float: left;
}

出现背景图片，但我的导航未水平对齐。

有什么想法吗？

这是HTML

<div class="navigation">
<ul>
<li><a href="#">Shop</a></li>
<li><a href="#">Our Collection</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">News</a></li>

</ul>

</div>

由于

Answer 1

Check this fiddle.

图像就在那里。只是容器（在这种情况下为div）不足以显示图像。所以你只能看到图像的顶部。

通过强制容器的高度（可能与图像的高度相同），您将显示整个背景图像。