Css如何在悬停li元素时添加圆角？

我希望在悬停时向li元素添加圆角：

我的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可以使菜单水平。

您可以编写以下代码：

<div style="width:400px;height:300px;-webkit-border-radius: 71px;-moz-border-radius: 71px;border-radius: 71px;background-color:#E3934D;">
    Just modify width and height values to get what you need...
</div>

只需修改宽度和高度值即可获得所需的。。。

---

您可以访问以获得进一步的解释和功能

我相信，您可以做一些小的调整，如字体大小和颜色等。您能停止大写随机词吗？这很烦人。

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;
}