滑動垂直菜單：防止標題在懸停時向左移動

我正在嘗試修正滑動垂直菜單中菜單標題向右移動時的問題。滑動垂直菜單：防止標題在懸停時向左移動

你可以自己看看here當超過portfolio時。

這是我目前使用的CSS：

#menu { 
    position: absolute; 
    top: 60px; 
    right: 20px; 
    height: 80%; 
    color: #ffffff; 
    cursor: default; 
    letter-spacing:8px; 
} 

#menu li { 
    list-style: none; 
    cursor: pointer; 
    letter-spacing:1px; 
} 

#menu-portfolio { 
    float: left; 
    border-right: 2px solid; 
    padding-right: 0.3em; 
    font-size: 95%; 
} 

.menu-gallery-selector { 
    font-size: 85%; 
    text-align:left; 
    margin:5%; 
} 

.menu-gallery-selector:nth-of-type(1) { 
    margin-top:15%; 
} 

#menu-contact { 
    float: left; 
    letter-spacing:1px; 
    padding-left: 0.4em; 
    font-size: 95%; 
}

這是JavaScript：

$("#menu-portfolio").bind("mouseover", expand); 
$("#menu-portfolio").bind("mouseout",collapse); 
$(".menu-gallery-selector").hide(); 


function collapse() { 
    $(".menu-gallery-selector").hide(); 
} 

function expand() { 
    $(".menu-gallery-selector").show(); 
}

來源

2013-04-27 codeJack

你使用什麼瀏覽器？我看到沒有問題我也考慮製作這個沒有任何javascript的菜單，你可以使用'：hover'僞類來顯示/隱藏子菜單，這個簡單的規則如下：li：hover ul {display：none} li： hover ul {display：block;}' – 2013-04-27 15:18:01

簡單的解決

#menu-portfolio { 
text-align:right; 
}

來源

2013-04-27 15:14:08 monkeyinsight

您可以通過添加text-align: right;修復到

#menu-portfolio { 
    float: left; 
    border-right: 2px solid #000; 
    padding-right: 0.3em; 
    font-size: 95%; 
    text-align: right; 
}

應該做的工作

來源

2013-04-27 15:17:46 Lobato

當我測試這個「投資組合」文本左移不正確。「投資組合」文本移動的原因是因爲最寬的列表項「汽車」的文本擴展了包含「投資組合」文本的<ul>標籤的寬度。您需要在投資組合文本上放置text-align: right;。

來源

2013-04-27 15:17:52 wellers

滑動垂直菜單：防止標題在懸停時向左移動

回答

相關問題