css menu bar issue in hover state in html5 - css

Question

This is my css:
.nav {
margin: 0px;
padding: 0px;
list-style: none;
display: table;
width:100%;
text-align: center;
position: relative;
}
.nav li {
display: table-cell;
}
.nav li a {
background: #FF0000;
color: #fff;
display: block;
padding: 7px 8px;
text-decoration: none;
}
.nav li a:hover {
background-color:#000;
border:1px solid #fff;
}
.nav ul {
display: none;
position: absolute;
margin-left: 0px;
list-style: none;
padding: 0px;
display: table;
width: 100%;
left: 0;
visibility: hidden;
}
.nav li:hover ul {
visibility: visible;
}
.nav ul li {
display: table-cell;
}
.nav ul a {
display: block;
height: 15px;
padding: 7px 8px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #222;
}
.nav ul li a:hover {
color: #069;
}
JSfiddle: http://jsfiddle.net/spog4sqg/3/
Here when hover over HOME display text-decoration:underline;, when hover over other remaining list, display like this: http://s7.postimg.org/br5nkl8zf/Untitled_1_copy.png
May i know, what is the exact css property to fix this.
Thanks in advance..

Answer 1

Basically this is what you're looking for:
.navigation > ul li:first-child a:hover {
background-color: red;
text-decoration: underline;
}
See Example

Answer 2

I used :first-child pseudo-class, hope that helps?
.nav li:first-child a:hover {
text-decoration: underline;
}
http://jsfiddle.net/w81swq5j/2/

Answer 3

I guess, that instead of the underline property, you mean that you want the hover state to stay active when you hover the child list.
In order to do so, trigger the hover effect on the list-item instead of the anchor.
Change:
.nav li a:hover {
background-color:#000;
}
To:
.nav li:hover a {
background-color:#000;
}
Updated Fiddle.
[EDIT]
Hope I understand your comment right. By 'underline' you mean that the submenu gets a background-color?
Then change it to:
.nav li:hover ul li a {
background-color:#000;
}
Updated Fiddle 2.