html - 所选类会关闭导航菜单

Question

我的导航菜单运行良好。但是，当我将所选类应用于导航列表中除“主页”链接以外的任何元素时，它会将我的导航菜单插入两行。我已经尝试了所有方法，但似乎无法解决问题。

这也只发生在 Chrome 中。我在 Windows 和 Mac 上的 Firefox 上试用过它，效果非常好。

我尝试在 About 的末尾添加一个斜线，这似乎将“About”这个词挤出来，但仍将斜线保留在第二行。

有人可以帮忙吗？我似乎无法弄清楚这一点。

我在说什么的图片:

这是我选择了家的菜单代码:

<div id="navigation"> <!-- Start navigation -->
                    <ul>
                        <li><a class="selected" href="index.html">Home \</a></li>
                        <li><a href="#">Shop <span>\</span></a></li>
                        <li><a href="collection.html">Collection <span>\</span></a></li>
                        <li><a href="#">Press <span>\</span></a></li>
                        <li><a href="#">Video <span>\</span></a></li>
                        <li><a href="about.html">About</a></li>
                    </ul>

下面是选择了“关于”链接的代码:

<div id="navigation"> <!-- Start navigation -->
                    <ul>
                        <li><a href="index.html">Home <span>\</span></a></li>
                        <li><a href="#">Shop <span>\</span></a></li>
                        <li><a href="collection.html">Collection <span>\</span></a></li>
                        <li><a href="#">Press <span>\</span></a></li>
                        <li><a href="#">Video <span>\</span></a></li>
                        <li><a class="selected" href="about.html">About</a></li>
                    </ul>
                </div> <!-- End navigation -->

还有 CSS:

#navigation { clear: both; float: right; margin-top: 30px; }
#navigation ul li { display: inline; margin-right: 10px; }
#navigation ul li a { font-family: "Lucida Console"; font-size: 19px; color: #B3B3B3; text-decoration: none; text-transform: uppercase; }
#navigation ul li a span { font-size: 12px; vertical-align: middle; }
#navigation ul li a.selected { color: #6a6a6a; }

Answer 1

我认为正在申请 .selected 的类(class)是您遗漏的。关于链接对我来说看起来更大。你在 Firebug 中检查过吗？