ドロップダウン水平サブメニューを右揃えにするにはどうすればよいですか？

これは私が現在持っているものです。 https://jsfiddle.net/pjt69trm/2/ドロップダウン水平サブメニューを右揃えにするにはどうすればよいですか？

HTML：

<body> 
    <div class="dropdown"> 
    <button class="dropbtn">Language</button> 

    <div class="dropdown-content"> 
     <a href="#" id="fr">Français</a> 
     <a href="#" id="es">Español</a> 
     <a href="#" id="en">English</a> 
    </div> 
    </div> 
</body>

はCSS：

.dropbtn { 
    background-color: transparent; 
    background-image: url("https://www.acadaslate.com/App_Themes/Default/images/glyphicon-triangle-bottom.png"); 
    background-repeat: no-repeat; 
    background-position: right center; 
    color: black; 
    border: none; 
    cursor: pointer; 
    white-space: pre; 
    font-size: 1.5vh; 
} 

.dropdown { 
    position: absolute; 
    display: inline-block; 
    top: 5%; 
    right: 50%; 
    margin: 0 0; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: white; 
    width: 350px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: inline-block; 
    float: left; 
} 

.dropdown-content a:hover { 
    background-color: #f1f1f1 
    /* branco mais escuro quando passa o mouse por cima */ 
} 

.dropdown:hover .dropdown-content { 
    display: inline-block; 
} 

.dropdown:hover .dropbtn { 
    /* se quiser que fique de outra cor quando passa o mouse por cima... */ 
    background-color: transparent; 
}

これは私が取得しようとしているものです：

This is what I'm trying to get. (Click)

私は自分のCSSの行を変更する必要があるように感じますが、何がわからないのですか？ :(

私はどこにでも、成功せずを探しているおそらく誰かが知っている

出典

2016-10-05 Rafaela Bennett

-コンテンツを.dropdownするmargin-left:-284px;を追加します。。0 .dropdown-へコンテンツクラス https://jsfiddle.net/pjt69trm/4/ – Swordys

ありがとうございました：ありがとうございました：D –

シンプルな...ちょうど追加

出典

2016-10-06 01:01:35

ありがとう、私は右に行っています：0; .dropdown-contentに –

どちらの方法もほぼ同じです。 –

ドロップダウン水平サブメニューを右揃えにするにはどうすればよいですか？

答えて

関連する問題