下拉菜單關閉

Question

進出口使用玉和CSS的下拉菜單

這裏是玉：

.dropdown 
     button.dropbtn(type="button") Me 
      .dropdown-content 
      a(href="/favorites") 
       | Favorites 
      a(href="/update") 
       | Edit 
      a(href="/logout") 
       | Logout 

這裏是CSS：

.dropdown{ 
    position: relative; 
    display: inline-block; 
} 
.dropdown-content a{ 
    display: block; 
    padding: 8px 0px; 
    text-align: justify; 
    color: grey; 
    text-decoration: none; 
} 
.dropbtn { 
    background: none; 
    color: grey; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 
.dropbtn:hover { 
    transition: all .2s ease-in-out; 
    background: none; 
    color: white; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 
.dropdown-content{ 
    display: none; 
    position: absolute; 
} 

.dropbtn:hover .dropdown-content{ 
    display: block; 
} 

這基本上是這樣，當你將鼠標懸停在「我」按鈕 上時，會出現下拉按鈕，但是當我向下移動光標以選擇一個 時（編輯： y表示懸停時出現的下拉菜單選項）立即消失。

似乎這樣的東西在Firefox中不起作用，但在Chrome中起作用。

編輯： 原來我需要改變玉以下（感謝凱豪大的幫助）：

 .dropdown 
     .dropbtn 
      | Me 
      .dropdown-content 
      a(href='/favorites') 
       | Favorites 
      a(href='/update') 
       | Edit 
      a(href='/logout') 
       | Logout 

Answer 1

你是什麼意思他們是什麼意思？在我的電腦中它確實有效。

嘗試將position: absolute更改爲relative作爲下拉菜單。也許它不起作用，因爲.dropbtn高度只能伸展自己，所以當你將鼠標懸停在光標上時，你不再指向它。您的.dropdown-content中的position: absolute不會使其拉伸父級內容。儘管如此，還需要額外的CSS調整。

.dropdown-content{ 
    display: none; 
    position: relative; /* here */ 
} 

---

.dropdown{ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content a{ 
 
    display: block; 
 
    padding: 8px 0px; 
 
    text-align: justify; 
 
    color: grey; 
 
    text-decoration: none; 
 
} 
 
.dropbtn { 
 
    background: none; 
 
    color: grey; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropbtn:hover { 
 
    transition: all .2s ease-in-out; 
 
    background: none; 
 
    color: white; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropdown-content{ 
 
    display: none; 
 
    position: relative; 
 
} 
 

 
.dropbtn:hover .dropdown-content{ 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <div class="dropbtn">Me 
 
    <div class="dropdown-content"><a href="/favorites"> 
 
      
 
     Favorites</a><a href="/update"> 
 
      
 
     Edit</a><a href="/logout">Logout</a></div> 
 
    </div> 
 
</div>