链接悬停动画下划线

Question

我正在尝试在链接悬停时设置下划线动画。我找到了这个例子：Underline css3 transition

它在 Safari 中运行良好。我在 Chrome 中实现代码的方式有些奇怪，我这辈子都搞不清楚。

代码：

HTML

<div id="Menu">
<ul>            
<li id="contactmenu">
<a href="#contactpage" class="smoothScroll" style="margin-right:50px">contact</a>
</li>   
<li id="portfoliomenu">
<a href="#portfoliopage" class="smoothScroll">portfolio</a>
</li>
<li id="servicesmenu">
<a href="#servicespage" class="smoothScroll">services</a> 
</li> 
<li id="aboutmenu">
<a href="#aboutpage" class="smoothScroll">about</a>
</li>
<li id="homemenu">
<a href="#homepage" class="smoothScroll">home</a>
</li>  
</ul>
</div>

CSS

#Menu li
{
position: relative;
display: inline-block;
float: right;
font-family: "Baskerville";
font-size: 30px;
list-style-type: none;
text-align: left;
}

div#Menu ul a
{
display: inline-block;
text-decoration: none;
color: white;
border-bottom: 2px solid maroon;
margin-right: 10px;
padding-bottom: 8px;
width: 0px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}

div#Menu ul a:hover
{
display: inline-block;
text-decoration: none;
color: #91A493;
border-bottom: 2px solid maroon;
margin-right: 10px;
padding-bottom: 8px;
width: 100%;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}  

Safari 似乎忽略了 width:0px 而 Chrome 没有，但我不知道发生了什么或该做什么。任何想法都非常感谢！

Answer 1

我已更新fiddle

我已经对宽度进行了更改。我签入了 FF 和 Chrome，它对我来说很好用。 如果您在此小提琴链接上仍有问题，请告诉我。

我所做的更改。

#Menu li
{
position: relative;
display: inline-block;
float: right;
font-family: "Baskerville";
font-size: 30px;
list-style-type: none;
text-align: left;
    width:20%; /* Added */

}