Как сделать цвет фона покрывать весь «блок» при зависании над ним

Question

Я изучаю CSS, и я пытаюсь подражать простой навигационной панели от этого website. Я хочу черный фон появляться при наведении курсора на элемент, так что я сделал это:

nav a:hover { 
background: black; 
} 

но фон охватывает только текст. Я хочу, чтобы он охватывал весь «блок», как исходный сайт (я не знаю правильного определения).

Как это сделать, не изменяя значения заполнения ярлыков привязки? (Потому что я использую отступы, чтобы создать это пространство между элементами.)

А вот якорные теги CSS, если вам это нужно:

nav a { text-decoration: none; text-transform: uppercase; font-family: sans-serif; font-weight: bold; font-size: 16px; color: white; float: left; padding-right: 2em; margin-top: 1.5em; }

Answer 1

Я предполагаю, что у вас есть элементы нав в a <ul><li></li></ul> структура.

в этом случае изменить nav a:hover к nav li:hover EDIT: Сделано это скрипку с вашего пера: https://jsfiddle.net/djgsgqp5/

Ваши navul и li элементы не получали не высоту. Если вы наведите указатель на эти элементы в devtools, вы увидите, что они имеют только ширину.

Стиль в скрипке гораздо более стабилен, надеюсь, делает то, что вам нужно.

Надеюсь, что это поможет!

Answer 2

Я кодируются так же, как на вашем примере веб-сайта, надеюсь, что это помогает: http://jsfiddle.net/yL7yj4xL/1/ (Вы должны удалить padding-right и заменить его просто padding)