CSSメニューのホバーが動作しない

Question

私はすべての<li>が外に出てくるメニューを作りたいと思います。しかし、奇妙なことに、メニュー全体が常に出てきます。ここで私は、次のCSSコードを持ってfiddle code.

です：

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

理由は、あなたがそれにマージンを与えるとき、それは全体ulをプッシュするということです。 marginの代わりにbottomを与える方が良いでしょう。このように書きます：

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

チェックこのhttp://jsfiddle.net/X96KE/17/

Answer 2

あなたは余裕トップをどうするかを指定していないためです。ここでは、更新例です：あなたはそれに精通している場合http://jsfiddle.net/X96KE/18/のjQueryを使用して

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

Answer 3

はあなたの問題を解決します

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

これを試してみてください