垂直導航欄無法正常工作

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

你不小心把一個左括號（{）在這裏，而不是一個右括號（}）。這會導致你之後的所有規則都被忽略。