Здравствуйте, возникла необходимость сделать выпадающее меню с помощью CSS. Задумка такая: 1) в "состоянии покоя": 2) при наведении на кнопку: т.е при наведении на левую графическую часть с кнопками появляется выпадающее меню, которое должно отображаться в строчку. Взяла код отсюда. Попыталась его адаптировать под свои цели, но столкнулась с двумя проблемами: 1) меню на том сайте работает в IE, а мое нет =( 2) мне нужно, чтобы в правом блоке синий фон был постоянно, а не только при наведении на кнопки в левом блоке. Помогите, пожалуйста уже два дня мучаюсь, ничего не могу сделать( Ссылка на страницу с "проблемным" меню вот. Код html: <div class="cssmenu"> <ul> <li> <a href="http://www.tassinfo.narod.ru/gts.html" onmouseout="document.mypic.src='http://www.tassinfo.narod.ru/button1_about_passive.png'" onmouseover="document.mypic.src='http://www.tassinfo.narod.ru/button1_about_active.png'"> <img border="0" vspace="0" name="mypic" width="176" height="40" src="http://www.tassinfo.narod.ru/button1_about_passive.png" style="display:block;"> </a> <ul> <li> </li> <li><a href="#">Link1<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li> <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <a href="http://www.tassinfo.narod.ru/gts.html" onmouseout="document.mypic2.src='http://www.tassinfo.narod.ru/button1_products_passive.png'" onmouseover="document.mypic2.src='http://www.tassinfo.narod.ru/button1_products_active.png'"> <img width="176" height="40" border="0" vspace="0" name="mypic2" src="http://www.tassinfo.narod.ru/button1_products_passive.png" style="display:block;"> </a> <ul> <li> <a href="#">Link3<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li> <li><a href="#">Link4<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li> <li><a href="#">Link5<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <a href="http://www.tassinfo.narod.ru/gts.html" onmouseout="document.mypic3.src='http://www.tassinfo.narod.ru/button1_contacts_passive.png'" onmouseover="document.mypic3.src='http://www.tassinfo.narod.ru/button1_contacts_active.png'"> <img width="176" height="40" vspace="0" border="0" name="mypic3" src="http://www.tassinfo.narod.ru/button1_contacts_passive.png" style="display:block;"> </a> <ul> <li><a href="#">Link6<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li> <li><a href="#">Link7<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> Код CSS: .cssmenu ul { padding: 0; margin: 0; list-style: none; width: 176px; position:relative; background-color: #0080ff; } .cssmenu li { float: left; } .cssmenu li a, .cssmenu li a:visited { display: inline; width: 175px; height:40px; line-height:40px; text-indent:0px; border: 0px; color: #ffffff; background-color: #0080ff; } .cssmenu li ul { visibility: hidden; position: absolute; left: 175px; top: 0px; } .cssmenu li:hover { position: relative; } .cssmenu li:hover > ul { visibility: visible; } .cssmenu li:hover > a { color:#ffffff; background:#0080ff; } .cssmenu ul a:hover ul { visibility:visible; } .cssmenu table { position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; } * html .cssmenu a:hover { color:#ffffff; background:#0080ff; position:relative; }
