CSS3 Übergang für Grenze - html, css, html5, css3

Ich versuche, einen Übergang für die rote Umrandung hinzuzufügen, wenn Sie den Listeneintrag mit der linken Maustaste loslassen, der Übergang funktioniert jedoch nur, wenn Sie mit der Maus über die Option „Weiter“ gehen.

Ist es möglich, einen Übergang für die rote Umrandung hinzuzufügen, so dass er beim Schweben abrutscht? Hier ist der Code http://jsbin.com/ewilix/3/edit

Antworten:

Sie müssen für den anfänglichen linken Rand dieselben Eigenschaften wie im Schwebezustand angeben, jedoch mit der Breite 0:

#conteneur-menu2 ul li a {
text-decoration: none;
font-size: 25px;
padding: 4px;
display: block;
color: white;
width: 230px;
transition: all 2s;
line-height: 20px;
border-left-style: solid;
border-left-color: red;
border-left-width: 0px;
}