爲什麼我的懸停命令不工作？

Question

我一直在嘗試使一些簡單的CSS下拉菜單，我不明白爲什麼下拉不會工作我已經嘗試了一切，我可以想到下面我已發佈的CSS和HTML。 HTML代碼是這個

<ul><li>Home</li> 
    <li>Crockery</li> 
    <li> 
    Cutlery 
    <ul> 
     <li>Kings</li> 
     <li>Bead</li> 
     <li>Tableware</li> 
    </ul> 
    </li> 
    <li>Glassware</li> 
    <li>Contact</li> 
</ul> 

CSS中這個

body { 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 20px 50px 150px; 
    font-size: 13px; 
    text-align: center; 
    background: #E3CAA1; 
} 

ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
} 
ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 
ul li:hover { 
    background: #555; 
    color: #fff; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
    display: block; 
} 

Answer 1

除去此行：

opacity: 0; 
visibility: hidden; 

從ul li ul{}選擇器。

https://jsfiddle.net/uc1pq9no/3/

Answer 2

您有visibility，z-index和opacity因爲這個樣本更新✄代碼：

ul li:hover ul { 
    display: block; 
    visibility: visible; 
    z-index: 12; 
    opacity: 1; 
    } 

此代碼使子菜單可見懸停第一級菜單項目，與pseudo-class-selectors

→測試here a working demo。