html - メニューオプションの矢印を適切に配置できません

Question

これがフィドルです。

名前がどんなに大きくても、矢印が名前の右側に来るようにしたいです。

矢印がうまく配置されておらず、ずっと悩んでいました。

非常に単純な CSS であることはわかっていますが、これには問題があります。

ご回答ありがとうございます。

#menu #container #right_menu_options #user span.arrow{
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid white;
        float: right;
        position: absolute;
        margin-top: 8px;
    }

Answer 1

このようにしてください

デモ

CSS

#menu #container #right_menu_options #user span.arrow{
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid white;
    position: absolute;
    right: 3px;
    top: 17px;
}
#menu #container #right_menu_options #user p{
    margin-top: 9px;
    position: relative;
    padding-right: 10px;       
}