Перемещение кнопок при наведении курсора мыши

Question

У меня проблема с переключением кнопок меню, когда я курсирую над ними с помощью мыши. Как только я это сделал, они все на месте. Когда я нажимаю F5, чтобы переустановить страницу, кнопки уже установлены. Проблема не возникает в IE8. Я использую Chrome (обновлено).

CSS:

div.header_container 
{ 
    clear: both; 
    float: left; 
    height: 180px; 
    width: 100%; 
} 

div.header 
{ 
    margin-top: 54px; 
    height: 110px; 
    background-color: #000000; 
    width: 100%; 
} 

div.logo 
{ 
    float: left; 
    margin-top: 23px; 
    margin-left: 5px; 
} 

div.menu 
{ 
    float: right; 
    margin-top: 58px; 
    margin-right: 10px; 
} 

div.menu ul 
{ 

} 

div.menu ul li 
{ 
    float: left; 
    margin-left: 30px; 
    padding-right: 10px; 
    list-style-image:url("../images/menu_block.jpg"); 
} 

div.menu ul li:hover 
{ 
    list-style-image:url("../images/menu_block_mo.png"); 
} 

div.menu ul li a 
{ 
    text-decoration: none; 
    color: #ffffff; 
    font-size: 16px; 
    font-family: 'CalibriRegular'; 
} 

HTML:

 <div class="wrapper"> 
    <div class="header_container"> 
     <div class="header"> 
      <div class="logo"> 
       <a href="#" title="Video Photo Editing Graphics | Stefanvlemmix.nl"><img src="images/logo.png" /></a> 
      </div> 
      <div class="menu"> 
       <ul> 
        <li><a href="./index.html">Start</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="./projects.html">Projects</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    </div> 

Любая идея, что я делаю неправильно?

Answer 1

Люди,

Вы используете другое изображение на Hover. Это изображение наведения не загружается изначально, и когда вы наводите курсор мыши на него - тогда он начинает загружаться, поэтому у вас есть это переключение при первом наведении.

Вы должны использовать CSS Sprite для решения этих проблем.

EDIT

OR, использование HTML-символов и CSS генерируется содержание (:after, :before) для этого. Просто измените цвет на зависании.

Все, что вам нужно:

div.menu ul li 
{ 
    float: left; 
    margin-left: 30px; 
    padding-right: 10px; 
    list-style:none; 
} 

.menu li:before { 
    display:inline-block; 
    content: "\25A0"; 
    color:white; 
    font-size:20px; 
    margin-right:5px; 
} 

div.menu ul li:hover:before 
{ 
    color:red; 
} 

и сделано. См. Здесь: http://jsfiddle.net/shekhardesigner/vQjMX/