Как полностью отобразить цвет в тексте подменю на панели навигации рецептов?

#html #css

Вопрос:

Мой вопрос здесь заключается в том, когда я навожу курсор на рецепты и когда я перехожу к подменю, как мне сделать так, чтобы синий курсор идеально соответствовал подзаголовкам. Как будто цвет не полностью покрывает текст. И для лучшего понимания, пожалуйста, прочитайте и запустите мой код, если хотите.

Я использую это в CSS

 nav li:hover ul {
    display: block;
}

Вот ссылка, пожалуйста, проверьте ее.

https://jsfiddle.net/harisfaisal/q68n7ro4/2/

1. Я не могу понять, какой вид текста вы хотите. Добавление некоторых примеров изображений может помочь людям глубже понять вашу проблему.

2. Было бы более полезно, если бы вы могли поделиться своим кодом или изображениями того, что вы в настоящее время сделали и чего ожидаете

3. Эй, я отредактировал свой вопрос и предоставил информацию, которую вы, ребята, просили.

Ответ №1:

Это потому nav li {width:20%} , что в вашем коде затрагиваются все li элементы, включая подменю, поэтому цвет покрывает только 20% подменю. Это можно исправить, добавив width:100%; в свой nav li li {} селектор.

Примечание: в вашем коде есть повторяющиеся селекторы, лучше объединить их, чтобы улучшить читаемость.

Ответ №2:

Цвет не полностью покрывает текст из-за nav li { width: 20%; Вы можете добавить nav ul li ul li { width: 100%;}