滑动垂直菜单：防止标题在悬停时向左移动

我正在尝试修正滑动垂直菜单中菜单标题向右移动时的问题。滑动垂直菜单：防止标题在悬停时向左移动

你可以自己看看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

滑动垂直菜单：防止标题在悬停时向左移动

回答

相关问题