CSS строка меню вопрос в парения состоянии в html5

Question

Это мой 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/

Здесь при наведении курсора над HOME дисплей text-decoration:underline;, когда парят над другими остающегося списка, дисплей как это: http://s7.postimg.org/br5nkl8zf/Untitled_1_copy.png

Могу ли я знать, что такое точное свойство css, чтобы исправить это.

Заранее спасибо ..

Answer 1

Я думаю, что вместо подчеркивания собственности, вы имеете в виду, что вы хотите, состояние парения, чтобы оставаться активным при наведении списка ребенка.

Чтобы сделать это, активируйте эффект наведения на элементе списка вместо привязки.

Изменение:

.nav li a:hover { 
    background-color:#000; 
} 

To:

.nav li:hover a { 
    background-color:#000; 
} 

Updated Fiddle.

[EDIT]

Надежда Я понимаю ваш комментарий право. Под «подчеркиванием» вы подразумеваете, что подменю получает фоновый цвет? Затем измените его:

.nav li:hover ul li a { 
    background-color:#000; 
} 

Updated Fiddle 2.

Answer 2

В основном это то, что вы ищете:

.navigation > ul li:first-child a:hover { 
    background-color: red; 
    text-decoration: underline; 
} 

See Example

Answer 3

я использовал: первый ребенок псевдо-класс, надеюсь, что помогает?

.nav li:first-child a:hover { 
    text-decoration: underline; 
} 

http://jsfiddle.net/w81swq5j/2/