html - Using transition mouseout in css3 -

I'm using the transition to create a simple menu "underline" (its actually border-bottom < / Code>) Infection, when it is a hover, you will find it in the border-down action and you will see it pop out. However, there is a problem with the transition "mouseout" effect, when I use my mouse li> A: Hover it disappears without any effect.

CSS3 code:

  / * menu * / # menu {float: true; Margin: -60px 0px 0; } # Menu ul {list-style-type: none; } # Menu ul li {display: inline; Padding-right: 20px; } # Menu ul li {display: inline-block; Text-decoration: None; Color: # a1a1a1; Font size: 19px; Padding-down: 7px; } #Menu Li> A: hover {infection: all 0.5s 0s ease; Text-decoration: None; Border bottom: 1 px solid #fff; Padding-down: 2px; }  

Q: How can I get mouse transition effects in css3?

Do not keep in transition in the initial state, just : hover < Not on / code> In addition, if you do not want to animate back to any extent, you need the boundary there, just make it transparent (or 0 pixels wide):

  # menu ul li {display : Inline-block; Text-decoration: None; Color: # a1a1a1; Font size: 19px; Padding-down: 7px; Border bottom: 1px solid transparent; Transition: all easily out in 0.5; }