为什么这个填充不起作用？

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

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

Answer 2

你在你的CSS中输了dropDownMenu。

原始

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

这个有效

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