В Мозилле, Опере и ИЕ7 все ОК. А вот в 6-м следующая проблема: при наведении мышки на ссылку, картинка меняется(то есть появляется ее нижняя часть), НО не если мышку отвести то она так и остается, то есть не возвращается в исходное положение. И так все картинки: если понаводить на разные ссылки, то появятся нижние части, но не исчезнут, если убрать мышку. Если переключиться на окно другой программы, а потом вернуться в IE6, то меню возвращается в исходное положение. Пожалуйста, помогите разобраться что не так. Заранее спасибо! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> /* Меню сайта */ .buttons { float: top; width: auto; height: auto; } .buttons div { margin: 0 5px 0 0; background-position: 0 100%; } .buttons div a { margin-left: 5px; display: block; border: solid 1px #FFFFFF; width: 100%; height: 100%; background: #C9DBEF; background-position: 0 0; position: relative; overflow: hidden; color: #2165FE; FONT-SIZE: 16px; FONT-WEIGHT: bold; text-decoration: none; } .buttons p { margin: 5px; padding: 0px } .buttons div span { position: absolute; width: 100%; height: 100%; cursor: pointer; padding-left: 45px; color: #2165FE; FONT-SIZE: 14px text-decoration: none; } .buttons div a:hover span { background-position: 0 100%; padding-left: 45px; color: #2165FE; FONT-SIZE: 14px text-decoration: none; } .punkt1 span { background: url(images/menu/punkt1.jpg) left top no-repeat; transparent none 0 0; } .punkt2 span { background: url(images/menu/punkt2.jpg) left top no-repeat; transparent none 0 0; } .punkt3 span { background: url(images/menu/punkt3.jpg) left top no-repeat; transparent none 0 0; } .punkt4 span { background: url(images/menu/punkt4.jpg) left top no-repeat; transparent none 0 0; } .punkt5 span { background: url(images/menu/punkt5.jpg) left top no-repeat; transparent none 0 0; } .punkt6 span { background: url(images/menu/punkt6.jpg) left top no-repeat; transparent none 0 0; } .punkt7 span { background: url(images/menu/punkt7.jpg) left top no-repeat; transparent none 0 0; } .buttons div.punkt1 { width: 190px; height: 40px; } .buttons div.punkt2 { width: 190px; height: 40px; } .buttons div.punkt3 { width: 190px; height: 40px; } .buttons div.punkt4 { width: 190px; height: 40px; } .buttons div.punkt5 { width: 190px; height: 40px; } .buttons div.punkt6 { width: 190px; height: 40px; } .buttons div.punkt7 { width: 190px; height: 40px; } </style> </head> <body> <div class="buttons"> <p><div class="punkt1"><a href="#" title="dfssdsfd"><span>1</span></a></div></p> <p><div class="punkt2"><a href="#" title="dfssdsfd"><span>2</span></a></div></p> <p><div class="punkt3"><a href="#" title="dfssdsfd"><span>3</span></a></div></p> <p><div class="punkt4"><a href="#" title="dfssdsfd"><span>4</span></a></div></p> <p><div class="punkt5"><a href="#" title="dfssdsfd"><span>5</span></a></div></p> <p><div class="punkt6"><a href="#" title="dfssdsfd"><span>6</span></a></div></p> <p><div class="punkt7"><a href="#" title="dfssdsfd"><span>7</span></a></div></p> </div> </body> </html>
