我决定修正我的右浮动下拉菜单。但是,一旦我将其定位为固定,它就会跳到左侧。我怎样才能解决这个问题?我知道我可以使用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>
答案 0 :(得分:2)
尝试right: 0;
:
.header .dropdown {
float: right;
margin-top: 0.42em;
position: fixed;
right: 0;
}
应该这样做。 (float: right;
会变得无关紧要)
答案 1 :(得分:0)
如果你想固定菜单的位置,那么就不需要让它向右浮动。根据您的要求选择合适的价值。
.header .dropdown {
/*float: right;*/
margin-top: 0.42em;
position: fixed;
right: 10px; //put the value you need
}