css - 试图制作一个水平导航栏，但这很棘手

Question

我正在尝试为我的网站创建一个水平导航栏，就在横幅下方。我希望我的导航栏由我在 photoshop 中制作的图像制成。无论我做什么，我都无法让它发挥作用。我也尝试使用翻转链接来实现它。

有人能告诉我我做错了什么吗？此代码是我的 master.dwt 文件的一部分。它位于我的根目录中名为"template"的文件夹中。

谢谢!

这是 CSS:

#navigation {
    width: 800px;
    height: 36px;
    background-color: transparent;
    margin-left:auto;
    margin-right:auto;
}
#navbar {
    list-style: none;
    height: 36px;
}
#navbar li {
    float: left; }
#navbar a {
display:block;
background:url(../nav bar2.png);
width:200px;
text-indent:-9000px;
}
#navbar a.link1:hover {background-position:0px -36px;}
#navbar a.link2 {background-position:-200px 0px;}
#navbar a.link2:hover {background-position:-200px -36px;}
#navbar a.link3 {background-position:-400px 0px;}
#navbar a.link3:hover{background-position:-400px -36px;}
#navbar a.link4 {background-position:-600px 0px;}
#navber a.link4:hover {background-position:-600px -36px;}

这是 HTML:

<div id="navigation">
<ul id="navbar">
<li><a href="default.html" class="link1">home</a></li>
<li><a href="about.html" class="link2">about</a></li>
<li><a href="portfolio.html" class="link3">portfolio</a></li>
<li><a href="contact.html" class="link4">contact</a></li>
</ul>
</div>

照片如下: http://i.stack.imgur.com/uEdO8.png

Answer 1

主要问题

(1) 如果图像的 url() 路径包含空格，则需要将整个路径放在引号中:

background:url("../nav bar2.png");

话虽如此，网站文件在文件名中包含空格并不是一个好主意。用连字符或下划线替换空格，或者干脆去掉空格会更安全。

(2) 一个 CSS 选择器中有错别字:

#navber a.link4:hover    /* Wrong */
#navbar a.link4:hover    /* Right */

小问题

(1) 如果您还没有这样做(可能使用 reset.css)，请删除 ul 标记中的默认间距；否则，4 个菜单项(每个 200px)将不适合 800px 容器。

#navbar {
    padding-left: 0;
    margin-left: 0;
}