垂直导航栏无法正常工作

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 2个错别字：

width: 30%: 

你把一个冒号在最后，而不是一个分号，所以在这条规则的每个属性后宽度为忽略。

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

你不小心把一个左括号（{）在这里，而不是一个右括号（}）。这会导致你之后的所有规则都被忽略。