Здравствуйте!
Создаю главное меню, в котором вместо теста использую картинки. При наведении курсора, картинки меняются. Но почему-то при первом наведении элемент меню как бы "пропадает". Вот код:
[CSS]/*---------------------HEADER---------------------*/
#header { height: 325px; background: url(images/emblem.jpg) no-repeat;}
#nav {float:left; height:136px; width:550px; float:right;}
#nav ul{ display:block; list-style:none; float:right;}
#home {width:104px; height:136px; float:left; }
#events {width:104px; height:136px; float:left;}
#staff{width:104px; height:136px; float:left;}
#contact{width:104px; height:136px; float:left;}
#menu{width:104px; height:136px; float:left;}
li#home a {display:block; width:104px; height:136px; background:url('images/home.jpg') no-repeat; text-indent: -9999px;}
li#events a {display:block; width:104px; height:136px; background:url('images/events.jpg') no-repeat; text-indent: -9999px;}
li#staff a {display:block; width:104px; height:136px; background:url('images/staff.jpg') no-repeat; text-indent: -9999px;}
li#contact a {display:block; width:104px; height:136px; background:url('images/contact.jpg') no-repeat; text-indent: -9999px;}
li#menu a {display:block; width:104px; height:136px; background:url('images/menu.jpg') no-repeat; text-indent: -9999px;}
li#home a:hover {background:url('images/home-h.jpg') no-repeat;}
li#events a:hover {background:url('images/events-h.jpg') no-repeat;}
li#staff a:hover {background:url('images/staff-h.jpg') no-repeat;}
li#contact a:hover {background:url('images/contact-h.jpg') no-repeat;}
li#menu a:hover {background:url('images/menu-h.jpg') no-repeat;}[/CSS]

Как исправить такой дефект верстки?