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

【问题标题】：why isnt this padding working?为什么这个填充不起作用？
【发布时间】：2017-04-04 19:47:35
【问题描述】：

我创建了一个下拉菜单并且工作正常，但我似乎无法向子菜单添加填充，我正在尝试将其添加到最里面的 li 元素，但由于某种原因它无法正常工作。我尝试向 ul 和 li 添加填充，但都不起作用。有谁知道我错过了什么问题？

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

【问题讨论】：

因为你的错字“.dropDwonMenu li”
因为你拼错了dropDownMenu li

标签： css drop-down-menu

【解决方案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;
}

【讨论】：

【解决方案2】：

你在你的 CSS 中打错了 dropDownMenu。

原创

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

这个有效

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

【讨论】：

感谢我学到的教训，当半睡不醒时不要编码并发布在堆栈溢出大声笑