鏈接懸停動畫下劃線

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瀏覽器會忽略寬度：0像素和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 */ 

}