Как мне согласовать событие CSS :hover для моего раскрывающегося списка с событием :hover, которое меняет цвет? ⇐ CSS

[Anonymous]

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

Код: Выделить всё

[*]
[url=homePage.html]
HOME
[/url]

[*]
[url=#]
RESOURCES
[/url]

[url=Water.html]Water[/url]
[url=Energy.html]Energy[/url]
[url=#]Flora[/url]
[url=Construction.html]Construction[/url]
[url=#]Food[/url]

CSS:

Код: Выделить всё

#mainNavbar .nav-link {
color: white;
font-family: "Playfair Display", serif;
}

#mainNavbar .nav-link:hover {
color: #ea1c2c;
text-decoration: underline solid;
}

/* Show the dropdown menu on hover */
.nav-item:hover .dropdown-menu {
color: #ea1c2c;
display: block;
border-radius:10%;
margin-left: 20%;
box-shadow: black 0px 3px 3px;
}

/* Style for dropdown links */
.dropdown-menu a {
color: #345535;
font-size: 1.5em;
display: block;
}

/* Change style of dropdown links on hover */
.dropdown-menu a:hover {
background-color: #ddd;
color:red;
font-size:1.6em;
}

Я ожидал, что установка обоих событий в nav-link сработает, но это нарушает мой раскрывающийся список. Я пытался с этим поиграться, но спотыкаюсь в темноте.

Подробнее здесь: https://stackoverflow.com/questions/786 ... er-event-t