-4

我正在使用此代码制作响应式链接（也就是说，当查看者位于他们链接到的页面上时，将它们突出显示）：

http://www.hicksdesign.co.uk/else/cssnav/

这需要用 ID 编写一个简单的 html 导航栏。

但是，出于某种原因，我创建的导航栏将链接结构化为垂直列表。我是否遗漏了一些明显的东西，或者这是浏览器方面的故障？我从所述页面获得的代码的列表是水平的，所以我很难理解为什么它甚至会以这种方式格式化。奇怪的是，悬停时链接不会改变颜色，所以我认为 li a:hover 样式也不起作用。

这是我在 ( https://dl.dropboxusercontent.com/u/33061840/site/responsivedesigntest.html ) 上使用它的页面，这是链接样式的 css 部分。

#navcontainer ul {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;

}

#navcontainer ul li {
    display: inline;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
}

#navcontainer ul li a {
    border-right: none;
    padding: 0;
    margin: 0 0 10px 0;
    color: #f5d7b4;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover {
    color: #930;
    background: #f5d7b4;
}
4

1 回答 1

3

你的选择器错了！

#navcontainer ul不存在。navlist相反，您的ul元素上有一个 id 。

这可以解决问题：

查看如何<b>NAVIGATE:</b>从内部移动ul并查看下面的 CSS 更改。

<div class="section group">
    <div class="col span_1_of_2">
                <b>NAVIGATE:</b>
                            <ul id="navlist"> 
                                <li><a href="home.html" id="home"</a>Home</li>
                                <li><a href="zukan.html" id="zukan">Zukan</a></li>
                                <li><a href="Stamps" id="stamps">Stamps</a></li>
                                <li><a href="Photography" id="photography">Photos</a></li>
                            </ul>
            </div>
</div>

--

#navlist {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navlist li {
    display: inline;
    float: left;
    text-align: center;
    padding: 10px;
    margin: 0;
}

#navlist li a {
    border-right: none;
    padding: 0;
    color: #f5d7b4;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navlist li a:hover {
    color: #930;
    background: #f5d7b4;
}

http://jsfiddle.net/h2Xg5/1/

从教程中复制代码时要小心，请务必仔细检查您复制的内容！

于 2013-06-27T22:25:29.740 回答