Menü mit Bootstrap und jquery mit CSS Übergang

Question

Ich versuche, ein einfaches Menü mit Bootstrap wie folgt zu erstellen:

HTML

<ul class="list-inline b-square pull-right"> 
      <li id="one" data-name="one"><a href="#"></a></li> 
      <li id="two" data-name="two"><a href="#"></a></li> 
      <li id="three" data-name="three"><a href="#"></a></li> 
      <li id="four" data-name="four"><a href="#"></a></li> 
      <li id="five" data-name="five"><a href="#"></a></li> 
      <li id="six" data-name="six"><a href="#"></a></li> 
     </ul> 

CSS

b-square > li { 
width : 24px; 
height : 24px; 
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
transition: width 2s; 
} 



.b-square > li:hover { 
width: 80px; 
color: #fff; 
text-align: right; 


} 

.b-square li#one { 
background-color: #000; 
padding: 2px 4px; 
} 

.b-square li#two { 
background-color: #F7A600; 
padding: 2px 4px; 
} 

.b-square li#three { 
background-color: green; 
padding: 2px 4px; 
} 

.b-square li#four { 
background-color: #000; 
padding: 2px 4px; 
} 


.b-square li#five{ 
background-color: #F7A600; 
padding: 2px 4px; 
} 


.b-square li#six { 
background-color: green; 
padding: 2px 4px; 
} 

jQuery

$(document).ready(function(){ 
     $('.b-square > li').hover(function(){ 

     var name = $(this).data('name');  


     $(this).text(name); 


     }, function(){ 
      $(this).text(''); 

     }); 


     }); 

Das Menü enthält sechs Quadrate mit verschiedenen Farben. Der CSS-Hover-Effekt erhöht die li-Breite von 80px. Die Hover-Funktion in jQuery fügt den Linknamen des ausgewählten li hinzu.

Die Skripte funktionieren, aber wenn ich den li schwebe, geht das ausgewählte Quadrat nach unten, anstatt mit den anderen übereinzustimmen. Hier ist eine Demo:

https://jsfiddle.net/jobgaraux/s3hdkgog/12/

Answer 1

mit Überlauf Versuche: versteckt:

.b-square > li { 
    overflow: hidden; 
    width : 24px; 
    height : 24px; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: width 2s; 
}