懸停下拉菜單與父母不同的屬性

我想創建一個按鈕時，懸停在具有不同屬性使用css的兩個下拉菜單。目前的問題是，當鼠標懸停時，下拉菜單的屬性不會發生變化，看起來好像該按鈕展開而不是僅顯示其下的兩個不同菜單。（試圖實現類似於此處顯示的演示：http://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-hide-dropdown-on-mouse-hover）。下面是代碼：懸停下拉菜單與父母不同的屬性

#nav { 
 
      margin: 0; 
 
      text-align: left; 
 
      color: #333; 
 
     } 
 
     #nav ul { 
 
      padding-right: 3.5px; 
 
      list-style-type: none; 
 
      text-align: left; 
 
      display: none; 
 
      visibility: hidden; 
 
     } 
 
     #nav ul li{ 
 
      margin-left: 0; 
 
      padding-left: 0; 
 
      color: black; 
 
      line-height: 21px; 
 
      position: relative; 
 
     } 
 
     #nav:hover .myClassUl{ 
 
      visibility: visible; 
 
      display: block; 
 
     } 
 
     .myClassUl { 
 
      min-width: 50px; 
 
      background: #f2f2f2; 
 
      display: none; 
 
      position: static; 
 
      z-index: 999; 
 
      left: 0; 
 
     }

<button id="nav" class="selected arrow">Communications▼ 
 
    <ul class="myClassUl"> 
 
     <li id="emailButton" class="pointerCursor">Email</li> 
 
     <li id="letterButton" class="pointerCursor">Letter</li> 
 
    </ul> 
 
</button>

任何幫助嗎？

來源

2015-09-30 saint

這一個工程，調整你的CSS一點，移動.myClassUl後#nav:hover .myClassUl{規則，並增加了懸停規則下拉項目

#nav { 
 
      margin: 0; 
 
      text-align: left; 
 
      color: #333; 
 
      position: relative; 
 
     } 
 
     #nav ul { 
 
      padding: 0; 
 
      margin: 2px; 
 
      list-style-type: none; 
 
      text-align: left; 
 
      display: none; 
 
     } 
 
     #nav ul li{ 
 
      margin: 0; 
 
      padding: 0; 
 
      color: black; 
 
      line-height: 21px; 
 
      position: relative; 
 
     } 
 
     .myClassUl { 
 
      min-width: 50px; 
 
      background: #f2f2f2; 
 
      display: none; 
 
      position: absolute; 
 
      z-index: 999; 
 
      left: 0; 
 
      top: 100%; 
 
      width: 50px; 
 
     } 
 
     #nav:hover .myClassUl{ 
 
      display: block; 
 
     } 
 

 
     #letterButton:hover, 
 
     #emailButton:hover { 
 
      color: #F99; 
 
     }

<button id="nav" class="selected arrow">Communications▼ 
 
<ul class="myClassUl"> 
 
    <li id="emailButton" class="pointerCursor">Email</li> 
 
    <li id="letterButton" class="pointerCursor">Letter</li> 
 
</ul> 
 
</button>

來源

2015-09-30 10:45:58 LGSon

你可以試試這個：

#nav { 
      margin: 0; 
      text-align: left; 
      color: #333; 
     } 
     #nav ul { 
      padding-right: 3.5px; 
      list-style-type: none; 
      text-align: left; 
      display: none; 
      visibility: hidden; 
     } 
     #nav ul li{ 
      margin-left: 0; 
      padding-left: 0; 
      color: black; 
      line-height: 21px; 
      position: relative; 
     } 
     #nav:hover .myClassUl{ 
      visibility: visible; 
      display: block; 
     } 
     .myClassUl { 
      min-width: 50px; 
      background: #f2f2f2; 
      display: none; 
      position: static; 
      z-index: 999; 
      left: 0; 
     } 

.myClassUl #emailButton:hover 
{ 
    background: red; 
} 
.myClassUl #letterButton:hover 
{ 
    background: red; 
}

FIDDLE EXAMPLE

來源

2015-09-30 10:45:41

懸停下拉菜單與父母不同的屬性

回答

相關問題