子菜單不會出現在懸停

Question

我很難得到CSS來讓菜單出現鼠標懸停在主菜單項上。如何在主菜單懸停時選擇子菜單？

HTML

 <ul class="mainNav"> 
      <li><a href="">Home</a></li> 
      <li class="dropdown"><a href="">Treatments</a> 
       <ul> 
        <li><a href="">Body Treatments</a></li> 
        <li><a href="">Make Up</a></li> 
        <li><a href="">Skincare</a></li> 
       </ul> 
      </li> 
      <li><a href="">Gallery</a></li> 
     </ul> 

CSS

.mainNav 
{ 
height: 43px; 
list-style: none; 
} 
.mainNav li 
{ 
float: left; 
position: relative; 
border-right: 1px solid #f0f986; 
font-size: 1.15em; 
height: 50px; 
list-style-type: none; 
} 
.mainNav li a 
{ 
text-decoration: none; 
padding: 13px 1.03em 10px; 
display: block; 
white-space: nowrap; 
font-size: 1.3em; 
font-weight: 600; 
color: White; 
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); 
} 
.mainNav li a:hover, .mainNav li a:focus 
{ 
color: #dbeaa5; 
background: #404e11; 
} 
.mainNav span 
{ 
font-size: 19px; 
position: relative; 
right: -5px; 
top: 2px; 
line-height: 1px; 
} 

.dropdown ul 
{ 
position: absolute; 
top: 43px; 
z-index: 100; 
visibility: hidden; 
} 
.dropdown ul li a 
{ 
background: none; 
text-align: left; 
display: block; 
} 
li li 
{ 
width: 100%; 
} 

任何援助將不勝感激。我相信這對你們中的大多數人來說非常簡單！

Answer 1

您可以在子菜單中的可見性改變可見當懸停在.dropdown列表項：

.dropdown:hover ul { 
    visibility: visible; 
} 

Fiddle Demo

Answer 2

變化

.dropdown ul 
{ 
    position: absolute; 
    top: 43px; 
    z-index: 100; 
    visibility: hidden; 
} 

到

.dropdown ul 
{ 
    position: absolute; 
    top: 43px; 
    z-index: 100; 
    display:block; 
} 

至少直到您開始使用JQuery將其打開/關閉

Answer 3

您還可以使用css轉換爲菜單設置動畫效果。
因此改變你的CSS選擇器

.dropdown ul{ 
    display:block; 
    position: absolute; 
    top: 43px; 
    z-index: 100; 
    overflow:hidden; 
    background-color:red; 
    height: 0px; 
    -webkit-transition: all 0.5s ease-in; 
    -moz-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in; 
    -ms-transition: all 0.5s ease-in; 
} 

.dropdown:hover ul { 
    visibility: visible; 
    height:200px; 
} 

Answer 4

是的，正如其他人評論了你需要的東西來切換下拉類的狀態。這可以通過很多方式完成，可見性和定位是最廣泛使用的兩個方面。