我認爲我的右側浮動下拉菜單應該固定。但是,只要我將其定位爲固定,它就會跳到左側。我怎樣才能解決這個問題?我知道我可以使用填充左移來移動它。但我希望他們是一個更合適的方式來做到這一點。固定下拉菜單不會浮到右側
/*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>
不使用位置:固定,可以使用位置:絕對 –