Keep line below menu when expanding - drop-down-menu

Question

I have a line below menu items when hovered.
It is a drop down menu, and i want to keep the line when i hover in the submenus.
Here is my code:
<nav id="primary_navigation">
<h1>Primary Navigation Menu</h1>
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li class="has-sub"><span>Services</span>
<ul>
<li><span>Service 1</span></li>
<li><span>Service 2</span></li>
</ul>
</li>
<li>Fees and Process</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Here is CSS:
nav#primary_navigation h1{
display: none;
text-align: center;
}
nav#primary_navigation {
margin-top: 15px;
margin-left: 100px;
font-family: 'Eraslght';
font-size: 18pt;
line-height: 20pt;
}
nav#primary_navigation ul {
list-style:none;
}
nav#primary_navigation ul li {
display: block;
float: left;
position: relative;
margin-left: 25px;
}
nav#primary_navigation ul li a:link, nav#primary_navigation ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
color: black;
}
/*1*/
nav#primary_navigation ul li:hover a{
display: block;
text-align: center;
text-decoration: none;
color: black;
}
nav#primary_navigation ul li a:hover, nav#primary_navigation ul li a:visited{
display: block;
text-align: center;
text-decoration: none;
color: black;
padding-bottom: 10px;
border-bottom: solid #000000;
}
nav#primary_navigation ul li a:active {
display: block;
text-align: center;
text-decoration: none;
color: black;
}
/*fin 1*/
nav#primary_navigation ul li:hover ul {
display: block;
background-color: #04E1BE;
}
nav#primary_navigation ul li ul {
margin: 0px;
list-style: none;
display: none;
position: absolute;
top: 40px;
left: -2px;
}
nav#primary_navigation ul li ul li {
width: 100px;
clear: left;
margin-left: -5px;
margin-top: 0px;
}
nav#primary_navigation ul li ul li a:link{
clear:left;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}
nav#primary_navigation ul li ul li:hover a, nav#primary_navigation ul li ul li a:active, nav#primary_navigation ul li ul li a:hover {
clear:left;
color: white;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}
Can anyone tell me a hint? i cant see where i should code what.
Thanks a lot.

Answer 1

As i have seen through it. You have given that padding-bottom property to li a:hover or visited or active, whatever but you have nested your submenus in the li element, So how can it be possible, bro? you are ending that element nav#primary_navigation ul li a before starting the submenus ul li because
<li class="has-sub"><span>Services</span> [your li a ends here]
<ul>
<li><span>Service 1</span></li> [So here no hover action'll be applied] here
<li><span>Service 2</span></li>
</ul>
</li>
So, just use style like this.
nav#primary_navigation ul li:hover, nav#primary_navigation ul li:visited{
display: block;
text-align: center;
text-decoration: none;
color: black;
padding-bottom: 10px;
border-bottom: solid #000000;
}
instead
nav#primary_navigation ul li a:hover, nav#primary_navigation ul li a:visited{
/*style goes here*/
}
Hope you get it.