CSS-Menü Hover funktioniert nicht

Question

Ich möchte ein Menü erstellen, wo jeder einzelne <li> schwebt. Aber seltsamerweise schwebt immer die ganze Speisekarte. Hier ist die fiddle code.

ich die folgende CSS-Code haben:

body { 
background-color: #eee; 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 

.tabs { 
    width: 80%; 
    position: fixed; 
    bottom: -20px; 
    left: 100px; 
} 
.tabs ul { 
    display:block; 
} 
.tabs li { 
    width: 60px; 
    height: 80px; 
    margin-bottom: -20px; 
    padding: 10px; 
    float: left; 
    list-style: none; 
    display: inline; 
    background-color: #ccc; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-radius: 10px 10px 0px 0px; 
    border-radius: 10px 10px 0px 0px; 
    font-family: verdana; 
    text-align: center; 
} 
.tabs li:hover { 
    margin-bottom: 20px; 
}​ 

Answer 1

Grund ist, dass, wenn Sie Marge geben es dann ist es ganz ul schieben. Es ist besser geben bottom anstelle von margin. schreiben wie folgt aus:

.tabs li:hover { 
    bottom: 20px; 
} 

prüfen diese http://jsfiddle.net/X96KE/17/

Answer 2

Es ist, weil Sie nicht angegeben haben, was mit der margin-top zu tun. Hier ist ein aktualisiertes Beispiel: http://jsfiddle.net/X96KE/18/

.tabs li:hover { 
    margin-bottom: -40px; 
    margin-top: -40px; 
} 

Answer 3

mit jQuery Ihr Problem lösen, wenn Sie mit ihm vertraut sind versuchen, diese

jQuery("li").mouseover(function() { 
    jQuery(this).css("margin-bottom","20px"); 
    }).mouseout(function(){ 
    jQuery(this).css("margin-bottom","0px"); 
    });