CSS下拉「打盒」

我真的不知道該怎麼解釋我的問題以外，詢問如何提高我的下拉列表的大小「打盒子」CSS下拉「打盒」

我的意思是，出現在我的下拉菜單時，我必須將鼠標懸停在按鈕的左側，否則下拉菜單會消失，而不是僅僅停留在漢堡包圖標上，並將鼠標向下移動。它似乎只發生在我全屏（2560x1440）時，否則就沒事了。因此，除非您擁有相同尺寸的屏幕，否則您無法真正複製。

也只是一個簡單的問題，怎麼來Example Title顯示爲

Example 
Title

/* Nav Bar Styling */ 
 

 
div.nav { 
 
    width: 100%; 
 
    background-color: #1c1c1c; 
 
    color: blue; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin-top: 0; 
 
    height: 50px; 
 
} 
 
#title { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    font-size: 1.5em; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 50%; 
 
    right: 50%; 
 
} 
 
span.dropbutton { 
 
    text-align: left; 
 
    vertical-align: middle; 
 
    color: white; 
 
    position: fixed; 
 
    top: 15px; 
 
    left: 2% 
 
} 
 
#lines:hover { 
 
    transform: scale(1.1); 
 
} 
 

 
/* Dropdown Styling */ 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 40px; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #1c1c1c; 
 
    min-width: 200px; 
 
    margin-top: 50px; 
 
} 
 
.dropdown-content a { 
 
    padding: 50px 16px; 
 
    display: block; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #343434; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

\t <div class="nav"> 
 
\t \t <p id="title">Example Title</p> 
 
\t \t <div class="dropdown"> 
 
\t \t <span class="dropbutton">☰</span> 
 
\t \t <div class="dropdown-content"> 
 
\t \t  <a href="#">Link 1</a> 
 
\t \t  <a href="#">Link 2</a> 
 
\t \t  <a href="#">Link 3</a> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div>

來源

2016-11-09 oneman

我有這樣的分辨率（MAC 27" ）。如果我理解，問題是span class="dropbutton"的位置固定爲2％。

In fullscreen is co完全在div class="dropdown"之外，而在小分辨率時，跨度過大。

來源

2016-11-09 10:07:58

我把它改成'left：20px;'現在很好，謝謝。有關「示例標題」問題的任何想法？ – oneman

添加這個CSS

.dropdown:hover {width: 100%; height: 100%;}

關於標題的問題，有右衝突：50％，左：50％。刪除右：50％，保持左：50％，並添加到#title

transform: translateX(-50%)

來源

2016-11-09 10:15:08

我只是在發佈後感到奇怪。你的解決方案解決了這個問題，謝謝 – oneman

我編輯了我的答案也爲其他問題。我希望它也有幫助。 –

CSS下拉「打盒」

回答

相關問題