Serge
-
Posts
6 -
Joined
-
Last visited
Serge's Achievements
Explorer (1/14)
0
Reputation
-
Это меню почему то не работает в IE 7 и IE8, но при этом прекрасно работает в IE6. Вот его HTML код: <!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 profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Выпадающее Меню </title> <link rel="stylesheet" href="images/menu.css" type="text/css" media="screen"> <script type="text/javascript" src="images/jquery.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#menu ul").css({display: "none"}); // Opera Fix jQuery("#menu li").hover(function(){ jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268); },function(){ jQuery(this).find('ul:first').css({visibility: "hidden"}); }); }); </script> </head> <body> <div id="navbar"> <div id="top_menu"> <ul id="menu" style="display:inline;"> <li><a href="">Главная</a></li> <li><a href="">Раздел 1</a> <ul id="submenu" style="display: block; visibility: hidden;"> <li><a href="">Страница1</a></li> <li><a href="">Страница2</a></li> <li><a href="">Страница3</a></li> <li><a href="">Страница4</a></li> <li><a href="">Страница5</a></li> <li><a href="">Страница6</a></li> </ul> </li> <li><a href="">Раздел 2</a></li> <li><a href="">Раздел 3</a></li> <li><a href="">Раздел 4</a></li> </ul> </div> </div> </body> </html> CSS: * { margin : 0; padding : 0; } #navbar { background : #1291cd; position: relative; margin : 100px auto 0; color : #fff; width : 926px; height : 34px; border-top : 1px solid #00a5e4; border-bottom : 1px solid #0b75af; text-align: left; z-index: 99; } #top_menu { width : 926px; height: 34px; background : transparent; font-size: 14px; font-weight : bold; font-family : Arial, Verdana, Sans-Serif; color: #fff; } ul#menu, ul#menu li { float: left; z-index: 100; list-style-type: none; background : transparent; } ul#menu { width : 926px; } ul#menu li { position: relative; background : url('sep.gif') no-repeat; width : 185px; height : 34px; text-align: center; } ul#menu li a:link, ul#menu li a:visited { padding: 9px 0; color: #eee; text-decoration: none; background : transparent; display: block; } ul#menu li a:hover, ul#menu a:active { padding: 9px 0; background: #06aeed; color: #fff; text-decoration: none; display: block; } ul#submenu { position: absolute; top: 35px; left: 0; background: #eee; width: 200px; height: auto; margin: -1px 0 0 0; font-size: 14px; line-height: 1; color: #006da5; z-index: 99; border: 1px solid #ddd; } ul#submenu li { float: left; width: 200px; height: auto; background : transparent; color: #006da5; font-weight: normal; text-align: left; line-height: 1; } ul#submenu li a:link, ul#submenu li a:visited { float: left; width: 180px; background : transparent; padding: 9px 10px; color: #006da5; text-align: left; text-decoration: none; } ul#submenu li a:hover, ul#submenu li a:active { color: #fff; float: left; width: 180px; height: auto; background: #06aeed; padding: 9px 10px; text-align: left; text-decoration: none; } ul#submenu img { border: 0; margin: 2px 5px -2px 0; } Это мое первое выпадающее меню, поэтому наверняка, где то сделал ошибку. Пожалуйста, подскажите, что неправильно в коде. Почему оно не выпадает?
-
Уже разобрался сам.
-
skalpelliano, спасибо. Помогло, теперь работает.
-
У меня проблема с соседними блоками на странице. Для того, чтобы выпадающее меню разворачивалось на полную длину, я приписал ему padding-bottom: 60px; #menu { background: transparent url('menu.png') repeat-x 100% 2px; width: 100%; height: 66px; margin: 0; padding-bottom: 60px; text-align: left; } Теперь меню работает нормально, но на эти 60px опустился нижележащий блок. Если поднять его при помощи отрицательного margin, то в IE6 нижние ссылки выпадающего меню, которые попадают на нижний блок - сворачиваются, не успеваешь подвести к ним курсор. На всякий случай, вот стиль нижнего блока: .container { position: relative; float: left; text-align: left; width : 980px; background: transparent; margin: 0 0 30px 0; padding: 10px 10px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } Пытался расположить эти блоки в разных плоскостях при помощи z-index - не помогло. Помогите исправить этот баг, плиз...
-
Вот код: <ul id="menu"> <li><a href="">Активный отдых</a> <ul> <li class="cat-item cat-item-8"><a href="">Заказники</a></li> <li class="cat-item cat-item-3"><a href="">Заповедники</a></li> <li class="cat-item cat-item-12"><a href="">Памятники</a></li> <li class="cat-item cat-item-13"><a href="">Парки</a></li> </ul> </li> <li><a href=">Отдых на море</a> <ul> <li class="cat-item cat-item-7"><a href="">Область</a></li> <li class="cat-item cat-item-9"><a href="">Область</a></li> <li class="cat-item cat-item-10"><a href="">Крым</a></li> <li class="cat-item cat-item-14"><a href="">Область</a></li> </ul> </li> <li><a href="">Туризм</a> <ul> <li class="cat-item cat-item-6"><a href="">Путешествия</a></li> <li class="cat-item cat-item-11"><a href="">Маршруты </a></li> <li class="cat-item cat-item-15"><a href="">Экскурсии</a></li> </ul> </li> </ul>
-
У меня не получается сделать выпадающее меню. Оно почему то упорно не хочет выпадать. Вот код: ul#menu { background: transparent url('images/menu.png') repeat-x 0 0; width: 90%; overflow: hidden; z-index: 100; list-style: none; } ul#menu li { position: relative; float: left; } ul#menu li a { background: transparent url('images/separator.gif') no-repeat 100% 1px; float: left; font-size: 15px; color: #fff; height: 65px; padding: 10px 17px 0 15px; } ul#menu li a:hover, ul#menu li.current-cat a { background:transparent url('images/menu-hover.png') repeat-x 100% 1px; text-decoration: none; } /* sub-menu */ ul#menu li ul { display: none; position: absolute; top: 36px; left: 0; background: #5f950b; width: 200px; font-size: 14px; line-height: 100%; z-index: 99; border: 1px solid #fff; } ul#menu li ul li { width: 118px; background: none; } ul#menu li ul li a { display: block; line-height: 1.2; } ul#menu li ul li a:hover { background: #D4D4D3; } Помогите, пожалуйста, разобраться в чем моя ошибка