CSS width transition and hover

I'm trying to implement a slide show like menu with CSS. It's working fine except for transition. If transition is used the elements are not in sync anymore. Whole menu losing width if multiple elements are hovered in short time. Everything works fine if transition is removed. Is there anything I have to be aware of when using CSS transitions and hover together? I thought a transition-timing-function: linear; would be enough to get width in sync. It seems like the transition is started early on the fading out element than fading in element. Some technical notes about implementation: It's a ul list. Menu items are represented as li. Selected menu item has a selected. This one is shown if there isn't any user interaction. The other ones are collapsed. If an element is hovered it's opened and all other ones are collapsed. There should be a transition effect when changing from collapsed to shown. ul { list-style: none; display: inline-block; padding: 0; /* * remove gaps between inline elements * https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ font-size: 0; } ul li { display: inline-block; overflow: hidden; /* * Transition */ transition: width 0.5s; transition-timing-function: linear; width: 50px; } ul li:hover, ul li.selected, ul:hover li.selected:hover { width: 564px; } ul:hover li.selected { width: 50px; } <ul> <li> <a href="http://www.3ker-ras-group.com/profil.html"> <img src="http://www.3ker-ras-group.com/images/m_profil.jpg" alt="Unser Profil"> </a> </li> <li class="selected"> <a href="http://www.3ker-ras-group.com/referenzen.html"> <img src="http://www.3ker-ras-group.com/images/m_referenzen_der_3ker_ras_group.jpg" alt="Referenzen der 3KER RAS GROUP"> </a> </li> <li> <a href="http://www.3ker-ras-group.com/jobs.html"> <img src="http://www.3ker-ras-group.com/images/m_hoehenarbeiter_jobs.jpg" alt="Jobs für Höhenarbeiter"> </a> </li> <li> <a href="http://www.3ker-ras-group.com/shop-kletterbedarf.html"> <img src="http://www.3ker-ras-group.com/images/m_kletterbedarf_shop.jpg" alt="Unser Shop für Kletterbedarf"> </a> </li> <li> <a href="http://www.3ker-ras-group.com/kontakt.html"> <img src="http://www.3ker-ras-group.com/images/m_kontakt_zum_unternehmen.jpg" alt="Kontakt aufnehmen"> </a> </li> </ul> Trigger the issue by moving cursor fast from left to right. It occurs at least in Firefox and Chrome. Didn't tested safari, IE and edge. Here is a JSFiddle: https://jsfiddle.net/vj12qswz/3/ All elements should fit in one line. Adjust preview window width if necessary.