1

I'm trying to have an underline animate on the link hover. I found this example: Underline css3 transition

And it works great, in Safari. Something about the way I have the code implemented is funky in Chrome and for the life of me I can't figure out.

Code:

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

It seems like Safari ignores the width:0px and Chrome does not, but I can't figure out what's going on or what to do. Any thoughts are much appreciated!

Community
  • 1
  • 1
stupendousman
  • 93
  • 2
  • 9

1 Answers1

1

I have updated the fiddle

I have done changes as to the width. I checked in FF and Chrome and it works fine for me. Let me know if you have the issue still on this fiddle link.

The changes that I have done.

#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 */

}
Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • Hey Nathan! Thanks for the response. I had played around with this last night, and it helped, but I think the problem I had with it was that it forced each menu item to have the same width, instead of the width of each item being set by the length of the text. The problem here is that the underline is 20% instead of being the length of the text it is underlining. Also, tested it in IE9, and the animation doesn't work. Didn't think about webkit in IE. Yay. Any thoughts for a jquery solution would be awesome! – stupendousman May 15 '13 at 14:12
  • @stupendousman place your texts in tag and apply the effect to tag. This way only your text will be underlined and not the whole box. – Irshad Nov 12 '15 at 04:10