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

Question

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

谁能告诉我我做错了什么？此代码是我的 master.dwt 文件的一部分。它位于我的根目录中名为“templates”的文件夹中。

谢谢！

这是 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;
}