Html 将鼠标悬停在CSS菜单上只影响元素的一部分？

我已经做了一个css下拉菜单，我想每个下拉选项都有一个蓝色的背景，当它被悬停。然而，当我尝试这个选项时，只有当它的上半部分悬停时，它的背景才会是蓝色的。这是在JSFIDLE上。如果将鼠标悬停在“产品”选项上，然后将鼠标放在“板材”下，但在灰色水平线上方，则背景不会是蓝色的。有人能帮我吗？多谢各位

HTML（注意这是我的网页的一部分，因此没有有效的语法）

---

主要问题在于边距和填充，但这可以通过将

ulli

更改为

display:block来解决而不是
显示：内联

当然，这并不是一个直接解决问题的方法，底部仍然有一个区域不适用于悬停，但它比以前小得多。解决这个问题的正确方法是固定你的边距和填充


更新

深入阅读您的代码，我发现了实际问题。它不像我最初认为的那样位于边距或填充中，而是13px的
top
属性，定义在
#drop nav ul li a
中。13px的顶部在您的列表中创建了一个空白的非活动空间

扔掉那一块，它就可以正常工作了：
ve页边距和位置奇怪的
s
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>    
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
    <ul id="drop-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Products <span id="arrowDown">&#9660</span></a>
        <ul>
          <li><a href="#">Children's Stuff</a></li>
          <li><a href="#">Plates</a></li>
          <li><a href="#">Top Sellers</a></li>
        </ul>
      </li>
      <li><a href="#">Services <span id="arrowDown">&#9660</span></a>
        <ul>
          <li><a href="#">Wash 'n' Fold</a></li>
          <li><a href="#">Blanket Making</a></li>
          <li><a href="#">Wedding Dress</a></li>
          <li><a href="#">Custom</a></li>
        </ul>
      </li>
    </ul>
    </nav>
    </div>

body
{
background-color: #dfdfdf;
}

#title
{
    text-align: center;
    color: #07a8ca;
    font-size:60pt;
    margin: 0px;
    padding: 0px;
    text-shadow: 2px 2px 0px #888888;
}

h1
{
    margin: 0px;
    padding: 0px;
}

hr 
{
    height: 3px;
    color: #07a8ca;
    background: #07a8ca;
    font-size: 0;
    border: 0;
}

#HorzLineDiv
{
    width: 95%;
    margin: 2% 0% 3% 0%;
    margin-left: auto ;
    margin-right: auto ;
}

#Menu
{
    width:100%;
}

#drop-nav
{
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

ul 
{
    list-style: none;
    padding: 0px;
    margin: 0px;

}

ul li 
{
    display: block;
    position: relative;
    float: left;
    display: inline;
    padding: 12px 50px 8px 50px;
    margin: 0px 5px 0px 5px;
    border-left: 3px solid #07a8ca;
}

ul li:first-child
{
    border-left: 0px; 
}

li ul 
{
    display: none;
}

ul li a 
{
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    text-align:center;
    color: #000;
    font: 25px/1.1em "Kelly Slab","serif";
    transition: color 0.4s ease 0s;
    -moz-transition: color 0.4s ease 0s; /* Firefox 4 */
    -webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
    -o-transition: color 0.4s ease 0s; /* Opera */
}

ul li a:hover 
{
    color: #FF4D4D;
}

li:hover ul 
{
    display: block; 
    position: absolute;
}

li:hover li 
{
    float: none;
}

li:hover a 
{
    margin:0;
}

li:hover li a:hover 
{
    background: #21e8fa;
}

#drop-nav li ul li 
{
   border-top: 0px; 
   border-left: 0px;
}

#drop-nav ul li a
{
    border-top: 3px solid #888;
    padding: 13px 0px 13px 0px;
    margin: -10px -8px;
    text-align:center;
    text-transform: none;
    position:relative;
    top: 13px;
    color: #000;
}

#drop-nav ul
{
    width:100%;
    position:absolute;
    right:-5px;
}

a
{
    margin:0px;
    padding:0px;
}

#arrowDown
{
    font-size: 10pt;
    vertical-align:text-bottom
}