How can it be written so succinctly in javascript? - css

Question

I am newbie with javascript and write some code at styles.css file like this :
#nav .subnav li:hover {
color: #000;
background-color: #ccc;
}
and
#nav > li:hover > a {
color: #000;
background-color: #ccc;
display: inline-block;
}
It effect to nav, ofcourse.
Here is my index.html file (nav)
<div id="header">
<ul id="nav">
<li>Home</li>
<li>Bane</li>
<li>Tour</li>
<li>Contact</li>
<li>
More
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
</div>
They said to me that I can write the code at styles.css file to be more brief like this :
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
I tried it and it ran very ok, but I have some question.
First, as you can see, the 1st code is #nav .subnav li:hover , why in the brief code is #nav .subnav li:hover a ? I thought that when I wrote #nav .subnav li:hover, it is enough because it impact to li:hover, why in the last code they add "a" ?
The second question is why they delete display: inline-block; ? They said that when I delete this display: inline-block; at #nav > li:hover > a, I can add this code
#nav > li {
display: inline-block;
}
but, I thought that it impact to the li class, not li:hover ?
Thank you very much for your time.

Answer 1

"a" added because they want something to happen to "a" tag when its parent "Li" tag is in the hover state
Your second question isn't clear to me. But "a" tag's default display state is "inline" and "li" tag's default display is "block". Usually when we are creating a navbar we make "li" display inline-block to make the navbar horizontal