固定的下拉列表将不会向右浮动

Question

我决定应该修复我的右上浮动下拉菜单。 但是，一旦我将其固定好，它就会跳到左侧。 我怎样才能解决这个问题？ 我知道我可以使用padding-left来移动它。 但我希望他们是这样做的更合适方法。

 /*body*/ html, body { font-size: 100%; height: 100% } /*Header*/ .dropdown img { height: 2.5em; width: 3.5em; } .dropdown-menu { background-color: rgba(0,0,0,0.5); } .header { background:url(/img/sri.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; position: relative; box-shadow: inset 0 0 0 1000px rgba(125, 132, 145, 0.6); min-height: 100% } .header ul li a { color: #fff; } .header .logo { float: left; margin-top: 0.42em; } .header .dropdown { float: right; margin-top: 0.42em; position: fixed; } .dropdown ul { top: 2em; left:-8em; width: auto; } .header .logo p { font-size: 1em; color: black; font-family: 'Permanent Marker', cursive; font-weight: bold; } 

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

Answer 1

right: 0;尝试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
}