固定ドロップダウンは右に浮かぶことはありません

Question

私は右浮動ドロップダウンメニューを修正することに決めました。しかし、それを固定するとすぐに、それは左側に飛びます。これをどうすれば解決できますか？私はそれを移動するために左にパディングを使用できることを知っています。しかし、私は彼らがこれを行うより適切な方法であることを願っています。

/*body*/ 
 
html, body { 
 
\t font-size: 100%; 
 
\t height: 100% 
 
} 
 

 

 
/*Header*/ 
 

 
.dropdown img { 
 
\t height: 2.5em; 
 
\t width: 3.5em; 
 
} 
 

 
.dropdown-menu { \t 
 
background-color: rgba(0,0,0,0.5); 
 
} 
 

 

 
.header { 
 
\t background:url(/img/sri.jpg) no-repeat center center; 
 
\t background-size: cover; 
 
\t background-attachment: fixed; 
 
\t position: relative; 
 
\t box-shadow: inset 0 0 0 1000px rgba(125, 132, 145, 0.6); 
 
\t min-height: 100% 
 
} 
 

 

 
.header ul li a { 
 
\t color: #fff; 
 
} 
 

 
.header .logo { 
 
\t float: left; 
 
\t margin-top: 0.42em; 
 
} 
 

 

 
.header .dropdown { 
 
\t float: right; 
 
\t margin-top: 0.42em; 
 
\t position: fixed; 
 
} 
 

 
.dropdown ul { 
 
\t top: 2em; 
 
\t left:-8em; 
 
\t width: auto; 
 
} 
 

 
.header .logo p { 
 
\t font-size: 1em; 
 
\t color: black; 
 
\t font-family: 'Permanent Marker', cursive; 
 
\t font-weight: bold; 
 
}

<div class="header"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="logo"><p>blablabla</p></div> 
 
\t \t \t <div class="dropdown"> 
 
\t \t \t \t <img src="img/menuwhite.jpg"> 
 
\t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t <li><a href="#">Find me on Linkedin</a><li> 
 
\t \t \t \t \t <li><a href="#">Send me an email</a></li> 
 
\t \t \t \t \t <li><a href="#" download="Resume">Download my resume</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

right: 0;をお試しください：

それを行う必要があります

.header .dropdown { 
    float: right; 
    margin-top: 0.42em; 
    position: fixed; 
    right: 0; 
} 

。 （float: right;は無関係になります）

Answer 2

メニューの位置を固定したい場合は、右に浮かせる必要はありません。お客様の要件に応じて適切な価値を置くだけです。

.header .dropdown { 
    /*float: right;*/ 
    margin-top: 0.42em; 
    position: fixed; 
    right: 10px; //put the value you need 
}