Скользящее вертикальное меню: запретить заголовок перемещаться влево на зависании

Question

Я пытаюсь исправить проблему с помощью скользящего вертикального меню, где заголовок меню перемещается вправо, когда я над ним.

Вы можете увидеть это сами 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(); 
} 

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; в текст Портфолио.