Adding hover effect to a specific portion of the nav bar - css

Question

Here I have a working nav bar with a drop down menu. However I want two different hover effects on both the main nav bar and a different one for the drop down menu, I already have the main nav bar working with a hover effect by adding the below CSS code.
#nav_bar a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
}
I simply need a way of adding a separate hover effect to the drop down menu

Answer 1

You need to use CSS here this way:
#nav_bar>ul>li>a:hover {
//styles here for main menu hover
}
#nav_bar>ul>li>ul>li>a:hover {
//styles here for dropdown menu hover
}
So your CSS for the main menu hover will become:
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
}
And you can use the following code to specify CSS for the dropdown menu hover:
#nav_bar>ul>li>ul>li>a:hover {
//styles here for dropdown menu hover
}
#nav_bar {
background-color: #a22b2f;
padding: 10px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
text-align: center;
padding-left: 0px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
font-family: Arial;
text-decoration: none;
font-weight: bold;
padding: 15px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: white;
padding: 10px;
border: 1px solid black;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
}
#nav_bar>ul>li>a:hover {
color: blue;
background: #fff;
}
#nav_bar>ul>li>ul>li>a:hover {
color: red;
background: #000;
}
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>GAMEMODE - SURVIVAL
</li>
<li>GAMEMODE - PURE-PVP
</li>
<li>GAMEMODE - GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
</ul>
</div>