Граница появляется при зависании

Question

Попытка сделать ссылку отображением border-bottom на :hover.

Here is the HTML. При наведении курсора на Вход вы должны увидеть 3px границы на нижнем

<ul class="secondaryNavList signIn"> 
    <li class="logo"><img src="images/layout/bbclogo.png" alt="BBC"></li> 
    <li class="signin"><a href="/signin">Sign in</a></li> 
</ul> 

Это CSS для висения

nav.secondary li.signIn a:hover{ 
    border-bottom:3px solid #0f0; 
} 

Не похоже, чтобы получить эту работу?

Answer 1

js и css чувствительны к регистру. изменить <li class="signin"> по <li class="signIn">

EDIT:http://jsfiddle.net/VAtD3/1/

Answer 2

просто проверить в нижней части CSS, где у вас есть:

nav.secondary li.signIn a:hover{ 
    border-bottom:3px solid #0f0; 
} 

лучше использовать:

.signin:hover{ 
    border-bottom:3px solid #0f0; 
} 

Это предназначается для удерживающего звена класс, который затем позволяет активировать действие зависания.

Answer 3

Попробуйте это в вашем HTML код, который вы использовали <ul class="secondaryNavList signIn">

.secondaryNavList a:hover{ 
    border-bottom:3px solid #0f0; 
} 

вместо

nav.secondary li.signIn a:hover{ 
    border-bottom:3px solid #0f0; 
} 

DEMO: http://jsfiddle.net/3zP2w/