2016-09-07 284 views
1

我目前有一些困難讓我彈出導航欄菜單保持在按鈕上方的位置。例如,當您更改瀏覽器窗口的大小時,您會看到按鈕和菜單之間的距離增加和減少。彷彿菜單進一步向上移動。導航欄菜單位置和懸停

另一個問題是,當我將鼠標懸停在按鈕上方的<div class="menu">彈出菜單時,這是一個問題,我試圖將此功能保留在按鈕內(不在上面)。

這是我正在與之合作。我希望你能幫助,非常感謝。

#btn-holder { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    position: static; 
 
    z-index: 10; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#btn-holder > .button { 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    padding: 8px 13px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    cursor: pointer; 
 
    right: -1%; 
 
    bottom: -1%; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    opacity: .8; 
 
    border-radius: 3px; 
 
} 
 

 
#btn-holder > .button:hover { 
 
    background-color: #732878; 
 
    color: white; 
 
} 
 

 
#btn-holder > .menu { 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    right: -1%; 
 
    bottom: -16%; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 

 
    
 
} 
 

 
.menu a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 8px 13px; 
 
    text-decoration: none; 
 
    font-family:'Source Sans Pro', sans-serif; 
 
    opacity: 8; 
 
    position:sticky; 
 
} 
 

 
.menu a:hover { 
 
    background-color: #732878; 
 
} 
 

 
.menu > ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
} 
 

 
.menu p { 
 
    opacity: 1; 
 
    margin: 0; 
 
} 
 

 
.menu p:after { 
 
    content:""; 
 
    display: block; 
 
    height: 1px; 
 
    vertical-align: bottom; 
 
    border-top: 1px solid #eee; 
 
    opacity: .4; 
 
} 
 

 
#btn-holder > .button:hover + .menu { 
 
    opacity: 1; 
 
    transistion-delay: 1s; 
 
} 
 

 
#btn-holder .menu:hover { 
 
    opacity: 1; 
 
    
 
}
<div id="btn-holder"> 
 
    <div class="button"> 
 
    <img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
    <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li> 
 
     
 
     <li><a href="/games"onclick="window.open(this.href, 'mywin', 
 
      'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li> 
 
     
 
     </ul> 
 
    </div> 
 
</div>

+0

這是因爲該行的:底部:-16%;將百分比更改爲像-60px這樣的固定值。 – Mojtaba

回答

0

的問題是你的菜單絕對定位,並具有一個百分比值。隨着窗口大小的變化,百分比值也會改變。如果您想在這種情況下使用絕對位置,請爲底部設置絕對值。

#btn-holder { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    position: static; 
 
    z-index: 10; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#btn-holder > .button { 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    padding: 8px 13px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    cursor: pointer; 
 
    right: 0; 
 
    bottom: 0; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    opacity: .8; 
 
    border-radius: 3px; 
 
} 
 

 
#btn-holder > .button:hover { 
 
    background-color: #732878; 
 
    color: white; 
 
} 
 

 
#btn-holder > .menu { 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #a137a7; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: -61px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 

 
    
 
} 
 

 
.menu a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 8px 13px; 
 
    text-decoration: none; 
 
    font-family:'Source Sans Pro', sans-serif; 
 
    opacity: 8; 
 
    position:sticky; 
 
} 
 

 
.menu a:hover { 
 
    background-color: #732878; 
 
} 
 

 
.menu > ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow: hidden; 
 
} 
 

 
.menu p { 
 
    opacity: 1; 
 
    margin: 0; 
 
} 
 

 
.menu p:after { 
 
    content:""; 
 
    display: block; 
 
    height: 1px; 
 
    vertical-align: bottom; 
 
    border-top: 1px solid #eee; 
 
    opacity: .4; 
 
} 
 

 
#btn-holder > .button:hover + .menu { 
 
    opacity: 1; 
 
    transistion-delay: 1s; 
 
} 
 

 
#btn-holder .menu:hover { 
 
    opacity: 1; 
 
    
 
}
<div id="btn-holder"> 
 
    <div class="button"> 
 
    <img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
    <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li> 
 
     
 
     <li><a href="/games"onclick="window.open(this.href, 'mywin', 
 
      'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li> 
 
     
 
     <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li> 
 
     
 
     </ul> 
 
    </div> 
 
</div>