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

我试图解决一个问题，滑动垂直菜单，当我在上面时，菜单标题向右移动

您可以在查看

公文包时自己查看它

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

简单修复

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

简单修复

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

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

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

应该做这项工作
您可以通过添加
文本对齐：右到

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

应该做这项工作
当我测试这个时，“公文包”文本会向左移动而不是向右移动。“公文包”文本移动的原因是，最宽列表项“Automotive”的文本扩展了包含“公文包”文本的
标记的宽度。您需要将
文本对齐：右对齐在公文包文本上。
当我测试这个时，“公文包”文本向左移动而不是向右移动。“公文包”文本移动的原因是，最宽列表项“Automotive”的文本扩展了包含“公文包”文本的
标记的宽度。您需要将
文本对齐：右对齐在公文包文本上。
您使用什么浏览器？我没有看到任何问题，我也会考虑在没有任何JavaScript的情况下制作这个菜单，你可以使用<代码>：HOFFUL/<代码>伪类来显示/隐藏子菜单，这个简单的2条规则<代码> LI:HOLL UL {显示：无} LI:HOLL UL {显示：块；} /代码>你使用什么浏览器？我没有看到任何问题，我也会考虑在没有任何JavaScript的情况下制作这个菜单，你可以使用<代码>：HOFFUL/<代码>伪类来显示/隐藏子菜单，这个简单的2条规则<代码> LI:HOLL UL {显示：无} LI:HOLL UL {显示：块；}