Фон для элемента навигации, не заполняющего все пространство

Question

Сообщество StackOverflow!

У меня проблема с моим веб-сайтом, когда я нахожу элемент над моей панелью навигации, и он не покрывает всю область, которую я намереваюсь охватить. Для тех модераторов, которые остро замечают, что на этот вопрос дан ответ Здесь и Здесь , это не применимо в моей ситуации, поскольку один является тегом span, а другой - вертикальным выпадающий, а не горизонтальная панель навигации. Ниже приведен скриншот проблемы.

_{Эффект, который я намереваюсь получить, - получить фон справа от края сверху и снизу и задвинуть фон к краю справа и слева}

Я пытался поиграть и посмотреть в Интернете, но наиболее последовательный ответ:

Использование display: block

Что могло бы испортить поток навигационной панели, если бы я ее реализовал. Может ли кто-нибудь указать мне правильное направление?

CSS, используемый для стилизации панели навигации и ее элементов:

nav {
    text-align: center;
    background-color: black;
}

nav ul {
    list-style-type: none;
    padding: 10px;
}

nav li {
    display: inline-block;
    transition: background-color 0.3s ease-in-out 0s;
}

nav li:hover {
    background-color: lightgrey;
}

nav a {
    text-decoration: none;
    color: white;
}

ПРИМЕЧАНИЕ: Проблема в том, что я добавил несколько отступов к элементу ul, я это понимаю. Я просто не уверен, как обойти это без прикручивания навигационной панели

Answer 1

Просто поместите отступ на li.

nav {
    text-align: center;
    background-color: black;
}

nav ul {
    list-style-type: none;
}

nav li {
    display: inline-block;
    transition: background-color 0.3s ease-in-out 0s;
    padding: 10px;
}

nav li:hover {
    background-color: lightgrey;
}

nav a {
    text-decoration: none;
    color: white;
}

<nav>
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
  </ul>
</nav>