CSS Навигация Sprite hover не работает

Question

У меня возникла проблема при попытке реализовать часть CSS для моей спрайтной навигации, чтобы привнести эффект «зависания» из моего спрайта при наведении. Легче объяснить, показываю ли я код.

CSS:

#nav { 

    width:837px; 
    float:left; 
    margin:0px 0px 0px 30px; 
    background:url(../images/withtext.gif) repeat-x; 
    height:79px; 
    position: relative; 
    top: -45px; 
} 


#nav li { 
margin:0; 
padding:0; 
list-style-type:none; 
display:inline; 
height:79px; 
text-align:center; 
float:left; 
line-height:79px; 
font-family:Georgia, "Times New Roman", Times, serif; 
} 



#nav a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
} 

#nav a:hover { 
background-image:url(withtext.gif); 
color:#fff; 
} 



#nav .snowboard { width:240px; } 
#nav .snowboard a:hover { background-position: 0px bottom; } 

код HTML:

<ul id="nav"> 
    <li class="snowboard"><a href="#">Snowboard</a></li> 
    <li class="briller"><a href="#">Briller</a></li> 
    <li class="ski"><a href="#">Ski</a></li> 
    <li class="stovler"><a href="#">Stovler</a></li> 
    <li class="handlevogn"><a href="#">Handlevogn</a></li> 

</ul> 

Навигация:

[1] http://i.imgur.com/zkVmoEN.gif "Навигационная панель с пассивным и парить состояние"

Современное состояние навигации:

[2] http://i.imgur.com/oZPK8kd.jpg «Навигация в браузере»

Так как я делаю это так, что она движется вниз по изображению Всего бороздки при наведении курсора мыши?

Помогите с благодарностью заранее!

Answer 1

Здесь идет ваш рабочий solution

#nav ul, #nav li{ 
    margin: 0; 
    padding: 0; 
} 
#nav { 

    width:837px; 
    float:left; 
    margin:0px 0px 0px 30px; 
    background:url(http://i.imgur.com/zkVmoEN.gif) repeat-x; 
    height:79px; 
    position: relative; 
} 

#nav li { 
margin:0; 
padding:0; 
list-style-type:none; 
display:inline; 
height:79px; 
text-align:center; 
float:left; 
line-height:79px; 
font-family:Georgia, "Times New Roman", Times, serif; 
} 

#nav a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
    width:150px; 
    text-indent:-9999px; 
} 
.snowboard a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -40px 80px; 
} 
.briller a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -190px 80px; 
} 
.ski a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -340px 80px; 
} 
.stovler a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -490px 80px; 
} 
.handlevogn a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -640px 80px; 
} 

Answer 2

Try:

#nav li a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
} 

#nav li a:hover { 
background-image:url(withtext.gif); 
color:#fff; 
} 



#nav li.snowboard { width:240px; } 
#nav li.snowboard a:hover { background-position: 0px -79px; }/*Here change as needed.*/ 

Css классы всегда использовать теги например .: li.class{} Пытаться держать селекторы торгующие на том же уровне:

foo foo2 foo2 a{} 
foo foo2 foo2 a:hover{} 

В фон положение использование точек отрицательной и положительны.

Note-OFF: я рекомендую, если у вас возникли проблемы сделать ваши CSS диски в различных браузерах, вы пытаетесь использовать CSS Reset:

* { маржа: 0; прокладка: 0; list-style-type: none; }

Answer 3

Если у вас возникли проблемы с CSS, это может быть связано с тем, что вы добавляете только эффекты зависания текста. Вы не можете навешивать текст и иметь фоновое изображение, где вы хотите, кстати. Если вы хотите, вы можете попробовать это:

CSS:

#nav{background:url(../images/withtext.gif) 
    repeat-x; 
    height:100px; 
    width:100%; 
    } 
li { 
background-color: #??????; 
} 
li a { 
color: black; 
} 
li:hover { 
background-color: #something_different; 
} 
li a:hover { 
color:#something_different; 
} 

Или, если вы хотите иметь классы Li каждый отличается, вы можете просто сделать это:

.snowboard li:hover { 
Some code... 
} 

.snowboard li a:hover { 
some code 
} 

Если вы такой макет, вы можете в принципе сделать что угодно.