Css 如何在 hover li 元素时添加圆 Angular ？

Question

我想在悬停时向 li 元素添加圆 Angular :

我的 HTML:

<ul>
<li id="menufirst">
<span id="menu1"></span>
<a href="#">Menu 1</a>
</li>
<li>
<span id="menu2"></span>
<a href="#">Menu 2</a>
</li>
<li>
<span id="menu3"></span>
<a href="#">Menu 3 </a>
</li>
</ul>

想要存档的示例:

我已经有了一些 CSS 来使菜单水平。

Answer 1

li:hover{
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  background-color: #000;
}

li{
  width: 50px;
  height: 50px;
  margin: 30px;
  float: left;
  padding: 10px;
}

li a{
  color: #0070C0;
  font-size: 14px;
  text-decoration: none;
}