hover и white space

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