为什么不是这个填充工作？

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; 
}