annet
-
Posts
1 -
Joined
-
Last visited
annet's Achievements
Explorer (1/14)
0
Reputation
-
Здравствуйте. Очень срочно нужна помощь. Возникла проблема при верстке выпадающего меню на css. При открытом выпадающем меню, когда курсор находится вне ссылки верхнего уровня пропадает фоновая картинка под этой ссылкой (она становится неактивной). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="container"> <div id="content"> <div id="submenu"> <ul> <li class="sub1"><a href="#">Сайты</a> <div class="submenu1"> <img src="http://itmages.ru/image/view/684927/517a2c1c" alt=""> <div class="sm1"> <ul > <li><a href="#">Все</a></li> <li><a href="#">Интернет-магазины</a></li> <li><a href="#">Бизнес, финансы</a></li> <li><a href="#">Строительство</a></li> <li><a href="#">Увлечения, отдых</a></li> <li><a href="#">Обучение</a></li> <li><a href="#">Флеш-сайты</a></li> </ul> </div> <img src="http://itmages.ru/image/view/684925/1764c44d" alt=""> </div> </li> <li class="sub2"> <a href="#">Флеш</a> <div class="submenu2"> <img src="http://itmages.ru/image/view/684924/ea0d0f64" width="130" alt=""> <div class="sm2"> <ul> <li><a href="#">Рекламные ролики</a></li> <li><a href="#">Заставки</a></li> <li><a href="#">Открытки</a></li> <li><a href="#">Презентации</a></li> <li><a href="#">Элементы страниц</a></li> </ul> </div> <img src="http://itmages.ru/image/view/684922/12ff4093" width="130" alt=""> </div> </li> <li class="sub3"> <a href="#">Баннеры</a> <div class="submenu3"> <img src="http://itmages.ru/image/view/684921/3566b7e7" width="110" alt=""> <div class="sm3"> <ul> <li><a href="#">Флеш баннеры</a></li> <li><a href="#">GIF баннеры</a></li> </ul> </div> <img src="http://itmages.ru/image/view/684925/1764c44d" width="110" alt=""> </div> </li> <li class="sub-next"> <a href="#">Логотипы</a> </li> <li class="sub-next"> <a href="#">Игры</a> </li> <li class="sub-next"> <a href="#">Продвижение сайтов</a> </li> </ul> </div> </div> <div class="empty"></div> </div> <div id="footer"> <div id="copy"></div> </div> </body> </html> и css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; } html{ height:100%; background-color:#fff; } body { font-family: Arial, Helvetica, sans-serif; width:100%; min-width: 995px; height:100%; margin:0; } img{ border: 0; padding: 0; margin: 0; } #container{ width:100%; background: url("image/fon-content.png") repeat-y; background-position: center; height:auto; min-height:100%; margin:0 auto; z-index: 50; } #content{ width:995px; margin: 0 auto; color: #7b7b7b; font-size: 11px; height: auto; position: relative; display: table; } #content p{ color: #7b7b7b; font-size: 11px; } #submenu { width: 867px; margin: 12px auto 50px; padding: 0; font-size: 13px; font-weight: bold; color: #0d6901; text-decoration: none; } #submenu li { float: left; list-style: none; padding:2px 3px 0 0; margin: 0; text-align: center; position: relative; background: none; color: #0d6901; display:block; border:none; } .sub1 a, .sub2 a, .sub3 a, .sub-next a{ color: #0d6901; text-decoration: none; padding:2px 6px 0; display: block; position: relative; } .sub1 a{ background: url("http://itmages.ru/image/view/684916/f628fa83") no-repeat; } .sub1 a:hover, .sub2 a:hover, .sub3 a:hover{ color: #fff !important; } .sub1 a:hover{ background: url("http://itmages.ru/image/view/684917/1fe974d2") no-repeat; display: block; } .sub2 a{ background: url("http://itmages.ru/image/view/684918/06b7b84e") no-repeat; } .sub2 a:hover{ background: url("http://itmages.ru/image/view/684919/ac020734") no-repeat; } .sub3 a{ background: url("http://itmages.ru/image/view/684914/b4a44465") no-repeat; } .sub3 a:hover{ background: url("http://itmages.ru/image/view/684915/e818bca5") no-repeat; } #submenu li .sub1 a .submenu1:hover{ background: url("http://itmages.ru/image/view/684917/1fe974d2") no-repeat; display: block; } .submenu1, .submenu2, .submenu3{ float: left; margin: 0; height: auto; position: absolute; text-align: left; font-size: 11px; color: #fff; left:-999em; } .submenu1 ul{ background: url("http://itmages.ru/image/view/684926/512aa44c"); margin: 0; list-style-image: url("http://itmages.ru/image/view/684928/600c6dac"); } .submenu1 li, .submenu2 li, .submenu3 li{ line-height: 13px; } .submenu1{width: 132px;} .submenu2{width: 130px;} .submenu3{width: 110px;} #submenu li:hover .submenu1, #submenu li:hover .submenu2, #submenu li:hover .submenu3{ left: 0; top: auto; } .sm1, .sm2, .sm3{ display: table; } .sm1{ width: 132px; min-height: 120px; background: url("http://itmages.ru/image/view/684926/512aa44c") repeat-y; margin: 0; } .sm2{ width: 130px; min-height: 120px; background: url("http://itmages.ru/image/view/684923/dfe3b631.jpg") repeat-y; margin: 0; } .sm3{ width: 110px; min-height: 70px; background: url("http://itmages.ru/image/view/684920/bb89ed5b") repeat-y; margin: 0; } .sm1 ul li, .sm2 ul li, .sm3 ul li{ background: url("http://itmages.ru/image/view/684928/600c6dac") no-repeat -3px 50% !important; padding:0 0 0 7px !important; text-align: left; color: #fff; font-weight: normal; font-size: 11px; margin: 0 !important; } .sm1 li a, .sm2 li a, .sm3 li a{ color: #fff; } .sm1 li a:hover, .sm2 li a:hover, .sm3 li a:hover{ color: #000 !important; background: none; } .submenu2 ul{ position: relative; } .sub-next a{ padding: 2px 7px 5px; } .sub-next a:hover{ padding: 2px 7px 5px; color: #14b600 !important; } Подскажите, пожалуйста, в чем может быть причина.