垂直导航栏无法正常工作

Question

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

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:10%;
        {
ul.nav li a {
...

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

垂直导航栏无法正常工作

Vertical Navigation Bar not working properly

html

css

navigationbar