2016-12-14 82 views
1

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

/*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>

+0

不使用位置:固定,可以使用位置:絕對 –

回答

2

嘗試right: 0;

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

應該這樣做。 (float: right;將變得無關緊要)

+0

訣竅!謝謝。那麼我是否應該使用填充 - 如果我想讓它從屏幕的右側移開一點點? – suonpera

+0

** padding-right **會這樣做,** right:10px; **也會這樣做,就像Taniya所說的那樣... –

+0

這是否解決了您的問題?你會接受答案嗎? –

0

如果您想要固定菜單的位置,則無需使其正確浮動。根據您的要求提供正確的價值。

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