hover и white space

Мне было интересно, можно ли сделать этот синий наклон в раскрывающемся списке крышкой 100% коробки, чтобы он выглядел как игровой мир. В любом случае, я могу заполнить это пустое пространство, чтобы эффект синего наведения доходил до конца поля, такого как мир игр?hover и white space

Вот 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;}

источник

2014-10-25 Anonymous

проблема заключается в том, что a является элементом линии, так это» возьмем только необходимое пространство, вы должны попытаться дать родительскому элементу background-color или добавить display:block; в элемент a

источник

2014-10-25 14:23:53

Возможно, у меня есть пример, потому что я не уверен, что вы имеете в виду. –

jsFiddle -> http://jsfiddle.net/teb6dhao/1/. В первом примере я добавляю: hover к элементу 'li', который является элементом' display: block; ', чтобы фон заполнил все пространство (в данном случае 200px, ширина родительского элемента), в то время как то же правило в элементе 'a' (второй пример) будет охватывать только пространство, в котором нуждается текст, поскольку это элемент' display: inline; '. –

Так что в вашем случае просто можно просто удалить '#nav_bar> ul> li> ul> li> a: hover {background: # 4485f5;}' и добавить это правило в '#nav_bar> ul> li> ul> li: hover '(я не знаю вашего html, поэтому я основываю свое приложение на css) –

ответ

Смежные вопросы