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

时间:2016-12-14 11:29:02

标签: html css

我决定修正我的右浮动下拉菜单。但是,一旦我将其定位为固定,它就会跳到左侧。我怎样才能解决这个问题?我知道我可以使用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>

2 个答案:

答案 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
}