垂直导航栏无法正常工作

Question

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

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

<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>

Answer 1

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

width: 30%:

您在末尾放了一个冒号，而不是分号，因此该规则中 width 之后的每个属性都将被忽略。

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

您不小心在此处放置了一个左括号 ( { )，而不是一个右括号 ( } )。这会导致您之后的所有规则都被忽略。