このパディングはなぜ機能しませんか？

Question

サブメニューにパディングを追加することができないようで、内部のほとんどの要素に追加しようとしていますが、何らかの理由で機能しない場合を除き、ドロップダウンメニューを作成して正常に動作します。私はulとliとpaddingを追加しようとしていません。問題が何であるか、誰かが分かっていることを誰かが知っていますか？

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でdropDownMenuをtypo'd。

オリジナル

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

この1が原因であなたのタイプミスの

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