html - 如何让 hover 使用 border-radius first-child

Question

我在一个小网站上工作，我有一个 border-radius 设置为 10px 的菜单。我在如何使悬停仅在第一个和最后一个 child 上使用 border-radius 时遇到问题。有人可以解释我做错了什么吗？

<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

CSS:

.menu ul
{
    background: #ede0b3;
    width: 200px;
    box-shadow: 1px 1px 1px 1px grey;
    border-radius: 10px; 
    margin-left: 5px;
} 

.menu ul li
{
    list-style: none;
    border-bottom: 1px solid grey;
}

.menu ul li a
{
    padding: 10px 15px;
    display: block;
    color: black;
    font-weight: bold;
    text-decoration: none; 
}

.menu ul li:last-child
{
    border-bottom: none;

}

.menu ul li a:hover
{
    background: white; 
}

.menu li a:first-child:hover
{
    border-radius: 10px;
}

演示:https://jsfiddle.net/vaydrvcr/

Answer 1

使用这个方法

.menu ul
{
	background: #ccc;
	width: 200px;
	box-shadow: 1px 1px 1px 1px grey;
	border-radius: 10px; 
	margin-left: 5px;
} 

.menu ul li
{
	list-style: none;
	border-bottom: 1px solid grey;
}

.menu ul li a
{
	padding: 10px 15px;
	display: block;
	color: black;
	font-weight: bold;
	text-decoration: none; 
}

.menu ul li:last-child
{
	border-bottom: none;

}

.menu li:first-child a:hover{
	border-radius: 10px;
  background:#fff;
}

.menu li:last-child a:hover{
	border-radius: 10px;
  background:#fff;
}

<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

Blockquote