Html 悬停框中间没有空格？

我正在制作一个导航栏。我想做的是，当鼠标悬停时，它将显示框/背景色，而不在家和我们周围之间留出空间，等等

就像这里的演示：导航栏。谢谢

HTML代码

检查一下这把小提琴

删除li上的边距，并为间距添加填充

.menuList > li{float:left;list-style:none;margin:0;padding:0 15px; background-color:green;}
.menuList > li:hover{background-color:red;}

#MenuContainer {
width:441px;
float:right;
overflow:hidden;
text-align:right;
    }

  #MenuContainer #loginContainer {
width:441px;
float:left;
overflow:hidden;
 }

  #MenuContainer #MenulistContainer {
width:441px;
float:left;
overflow:hidden;
margin-top:12px;
  }

  #MenuContainer #MenulistContainer .menuList li {
list-style:none;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
padding:0 0 0 10px;
  }

 #MenuContainer #MenulistContainer .menuList li a {
color:#000000;
text-decoration:none;
 }

 #MenuContainer #MenulistContainer .menuList li a:hover {
background-color:#003e7e;
text-decoration:#ffffff;
color:#ffffff;
padding: 0px;
list-style-type: none;

}

.menuList > li{float:left;list-style:none;margin:0;padding:0 15px; background-color:green;}
.menuList > li:hover{background-color:red;}