我正在建立一个导航栏。这就是我要的;
background-color
将鼠标悬停在链接上时更改链接。第一个和最后一个链接背景应该有圆角。
问题是要么所有链接都变成圆角,要么没有!
CSS
nav {
width:100%;
line-height:2;
}
nav ul {
list-style:none;
}
nav li a {
text-decoration:none;
color:white;
float:left;
width:90px;
display:block;
background-color:blue;
padding-left:10px;
}
nav li a:first-child {
border-radius:5px;
}
nav li a:last-child {
border-radius:5px;
}
nav li a:hover {
color:blue;
background-color:white;
}
HTML
<nav>
<ul>
<li><a href="#">Hem</a>
</li>
<li><a href="#">om oss</a>
</li>
<li><a href="#">hitta hit</a>
</li>
<li><a href="#">Kontakta</a>
</li>
</ul>
</nav>