我正在尝试为我的页面左侧制作一个导航栏,但它无法正常工作。链接颜色不会变为绿色,悬停功能不起作用,菜单的背景颜色仅覆盖链接本身,而不是从页面的顶部到底部。
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>
最佳答案
您的 CSS 中有两个拼写错误:
width: 30%:
你在末尾放了一个冒号,而不是分号,所以该规则中 width 之后的每个属性都将被忽略。
...
width:10%;
{
ul.nav li a {
...
您不小心在此处放置了左括号 ({) 而不是右括号 (})。这会导致您之后的所有规则都被忽略。
关于html - 垂直导航栏无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35444350/