爲什麼不是這個填充工作？

Question

我創建了一個下拉菜單，工作正常，但我似乎無法添加填充到子菜單，我試圖將其添加到最裏面的元素，但它不工作出於某種原因。我已經嘗試添加填充到ul和li而不工作。有誰知道這個問題是什麼，我錯過了？

https://jsfiddle.net/x0L1o242/28/

#mainMenu{ 
    display: flex; 

} 
li{ 
    list-style-type: none; 
} 
.dropDownMenu{ 
    border: 1px solid black; 
    border-radius: 5px; 
    background-color: blue; 
    color: white; 
    position: relative; 
    padding: 5px; 
} 
.dropDwonMenu li{ 
    padding: 30px;//part that isnt working 
} 
.dropDownMenu ul{ 
    position: absolute; 
    top: 30px; 
    left:0px; 
    visibility: hidden; 
    background-color: lightblue; 
    text-align: center; 
    padding: 0; 
} 

.dropDownMenu:hover ul{ 
     visibility: visible; 
} 

Answer 1

你在你的CSS typo'd dropDownMenu。

原始

.dropDwonMenu li{ 
    padding: 30px;//part that isnt working 
} 

這一個工程

.dropDownMenu li{ 
    padding: 30px;//part that isnt working 
} 

Answer 2

//Try This Css 

#mainMenu{ 
    display: flex; 

} 
li{ 
    list-style-type: none; 
} 
.dropDownMenu{ 
    border: 1px solid black; 
    border-radius: 5px; 
    background-color: blue; 
    color: white; 
    position: relative; 
    padding: 5px; 
} 


.dropDownMenu li { 
    padding: 10px; 
    width: 100px; 
} 
.dropDownMenu ul{ 
    position: absolute; 
    top: 30px; 
    left:0px; 
    visibility: hidden; 
    background-color: lightblue; 
    text-align: center; 
    padding: 0; 
} 

.dropDownMenu:hover ul{ 
    visibility: visible; 
}