Warum funktioniert diese Polsterung nicht?

Question

Ich habe ein Dropdown-Menü erstellt und funktioniert gut, außer ich kann nicht in der Lage sein, Padding in das Untermenü hinzuzufügen, ich versuche, es zu den innersten Li-Element hinzufügen, aber es funktioniert nicht aus irgendeinem Grund. Ich habe versucht, die ul und li hinzufügen Padding und keiner funktioniert. Weiß jemand, was das Problem ist, dass ich vermisse?

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

Sie typo'd DropDownMenu in Ihrem CSS.

Original-

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

Dieses funktioniert

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