CSS菜單懸停不起作用

我想要建立一個菜單，其中每個<li>盤騰。但奇怪的是整個菜單總是懸空。這裏是fiddle code.CSS菜單懸停不起作用

我有以下的CSS代碼：

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; 
}

來源

2012-04-10 Philipp Braun

原因是，當你給保證金到它，然後它的整體推ul。最好給bottom而不是margin。像這樣寫：

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

入住這http://jsfiddle.net/X96KE/17/

來源

2012-04-10 13:09:44 sandeep

那是因爲你沒有指定什麼用的上邊距做。下面是一個更新的例子：http://jsfiddle.net/X96KE/18/

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

來源

2012-04-10 13:16:47 Joshua

使用jQuery將解決你的問題，如果你熟悉它嘗試這種

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

來源

2012-04-10 13:22:46 Rizstien

CSS菜單懸停不起作用

回答

相關問題