Question

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

以下是下拉菜单的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赋予父元素或添加{{1}到display:block;元素

悬停和白色空间

1 个答案: