垂直导航栏无法正常工作

Question

I am trying to make a navigation bar for the left side of my page but it is not working properly. The link color won't change to green, the hover feature doesn't work, and the background color for the menu only covers the links themselves instead from top to bottom of the page.

 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

You have two typos in your CSS:

width: 30%:

You put a colon at the end, not a semicolon, so every property in that rule after width is being ignored.

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

You accidently put an opening bracket ( { ) here rather than a closing bracket ( } ). That's causing all your rules after that to be ignored.