Question

我正在尝试为我的页面左侧创建一个导航栏，但它无法正常工作。链接颜色不会变为绿色，悬停功能不起作用，菜单的背景颜色仅覆盖链接本身而不是从页面的顶部到底部。

＆＃13;

ul.nav {
    background-color: #f1f1f1;
    margin: 0px auto;
    width: 30%:
    height: 100%;
    position: fixed;
    overflow: hidden;
}
ul.nav li {
    display: block;
    height: 100%;
    width: 10%;
{
ul.nav li a {
    display: block;
    color: green;
    text-decoration: none;
}
ul.nav li a:hover {
    background-color: #555;
    color: white;
}

＆＃13;

<ul class="nav">
    <li><a href="x">x</a></li>
    <li><a href="x">x</a></li>
    <li><a href="x">x</a></li>
    <li><a href="x">x</a></li>
    <li><a href="x">x</a></li>
    <li><a href="x">x</a></li>
</ul>

＆＃13;

Answer 1

你的CSS中有两个拼写错误：

width: 30%:

你在末尾放了一个冒号，而不是分号，所以宽度之后的那个规则中的每个属性都被忽略了。

...
width:10%;
        {
ul.nav li a {
...

您意外地在此处放置一个左括号（ {）而不是右括号（} ）。这会导致您之后的所有规则被忽略。

垂直导航栏无法正常工作

1 个答案: