Question

我正在尝试修复滑动垂直菜单的问题，当我翻过它时，菜单标题会向右移动。

当您浏览portfolio时，您可以自己查看here。

这是我目前正在使用的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();
}

Answer 1

简单修复

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

Answer 2

您可以通过将text-align: right;添加到

来解决此问题

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

应该做的工作

Answer 3

当我测试这个时，“投资组合”文本向左移动不对。 “投资组合”文本移动的原因是因为最宽的列表项“汽车”的文本扩展了包含“投资组合”文本的<ul>标记的宽度。您需要将text-align: right;放在投资组合文本上。

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

3 个答案: