css - 悬停和空白

Question

我想知道是否可以让下拉列表中的这个蓝色悬停覆盖 100% 的框，这样看起来就像游戏世界悬停一样。无论如何，我可以填充那个空白区域，以便蓝色悬停效果像游戏世界一样到达盒子的末端吗？

这是下拉菜单的 GIF:http://gyazo.com/687add4b44f26bf8c325d45ba61ff6ea

这是我的导航栏 CSS:

/*TOP NAV BAR SECTION*/

#nav_bar {background-color:#a22b2f;
          padding: 1px;
          box-shadow: 0 2px 10px;
          height: 40px;
          padding-bottom: 10px;}

#nav_bar ul li {display: inline-block;}

#nav_bar ul li a {color: white;
                  text-decoration: none;
                  font-weight: bold;
                  padding: 10px;}

#nav_bar ul li ul {display: none;}

#nav_bar>ul>li>a:hover {background: #8c1b1f;
                        padding: 10px;
                        padding-top: 14px;
                        padding-bottom: 14px;}

#nav_bar>ul>li>ul>li>a:hover {background: #4485f5;}

#nav_bar ul li:hover ul {display: block;
                         position: absolute;
                         background: #e2e2e2;
                         padding:0px;
                         padding-top: 3px;
                         padding-bottom: 3px;
                         line-height: 1.5em;
                         box-shadow: 0 2px 10px;
                         margin-top:12px;}


#nav_bar ul li:hover ul li {display: block;}

#nav_bar ul li:hover ul li a {color: black;
                              font-size: 12px;
                              margin-left: -20px;
                              padding: 5px;
                              padding-right:39px;}

Answer 1

问题是 a 是一个行内元素，所以它只会占用它需要的空间，你应该尝试将 background-color 给父元素或将 display:block; 添加到 a 元素