Прощу помощи с версткой выпадающего меню под 6 и 7 осла

Статус
В этой теме нельзя размещать новые ответы.

funest

Постоялец
Регистрация
2 Июл 2007
Сообщения
146
Реакции
39
Сайт - , на нем выпадающее меню, которое нормально работает в лисе, опере и 8ie. В 7 невозможно навести курсор на выпадающее меню (сразу исчезает, как убираешь с кнопки). Второй косяк, это исчезающий первый пункт в выпадающем меню, если несколько раз наводить на кнопку курсор, то он появляется, то пропадает.
С шестым вообще ужас, но мне хоть у седьмого верстку поправить.
Вот код меню
Код:
#top_menu{position:absolute; bottom:0; right:0; z-index:10;}
#top_menu ul{list-style-type:none; margin-right:13px; position:relative;}
#top_menu ul li{float:left; line-height:55px; margin:10px 0 0 1px; position:relative;}
#top_menu ul li ul{display:none; position:absolute; top:50px; left:0; width:300px; z-index:100;}
#top_menu ul li ul li{background:url(../images/menu_li_bg.png) repeat-y; line-height:25px; margin:0; padding:5px 0; float:none;}
#top_menu ul li ul li:hover{background:url(../images/menu_li_bg_hover.png) repeat-y;}
#top_menu ul li ul .item13, #top_menu ul li ul .item16{background:url(../images/menu_li_top.png) no-repeat bottom !important; height:7px;}
#top_menu ul li ul .item14, #top_menu ul li ul .item21{background:url(../images/menu_li_bottom.png) no-repeat top !important; height:7px;}
#top_menu ul li ul li:hover{line-height:25px;margin:0 !important;}
#top_menu ul li ul li a, #top_menu ul li ul li a:hover, #top_menu ul li ul li a span, #top_menu ul li ul li a:hover span, #top_menu ul li:hover ul li a span, #top_menu ul .active:hover ul li a span, #top_menu ul li:hover ul li a, #top_menu ul .active:hover ul li a, #top_menu ul  .parent:hover ul li a, #top_menu ul  .parent:hover ul li a span{background:none !important; line-height:25px !important;}
#top_menu ul li ul li a:hover span{color:#374B79}
#top_menu ul li ul .active{margin:0 !important;}
#top_menu ul li:hover, #top_menu ul .active {line-height:65px; margin:0 0 0 1px;}
#top_menu ul li:hover ul{display:block;}
#top_menu ul li a, #top_menu ul  .parent span, #top_menu ul  .parent a{color:#fff; text-decoration:none; font-size:16px; background:url(../images/bt.png) no-repeat; display:block;}
#top_menu ul li a:hover, #top_menu ul .active a, #top_menu ul li:hover a, #top_menu ul .active:hover a, #top_menu ul  .parent:hover span, #top_menu ul  .parent:hover a, #top_menu ul  .active .separator{background:url(../images/bt_hover.png) no-repeat !important;}
#top_menu ul li a span, #top_menu ul  .parent span span, #top_menu ul  .parent a span{display:block; background: url(../images/bt_r.png) no-repeat right top; padding-right:23px; margin-left:24px;}
#top_menu ul li a:hover span, #top_menu ul .active a span,  #top_menu ul li:hover a span,  #top_menu ul .active:hover a span, #top_menu ul  .parent:hover span span, #top_menu ul  .parent:hover a span, #top_menu ul  .active .separator span {background:url(../images/bt_r_hover.png) no-repeat right top !important;}
Буду благодарен за любую наводку, своя думалка уже сломалась.
 
Там получается дополнительный зазор, видимо высота получается больше чем 7px. Попробуйте item13 item14 в которые вставлены маленькие картинки формирующие радиуса дописать font-size: 0px; так как IE иногда не может сделать высоту 7px пока font-size: 0px не поставишь.
Код:
#top_menu ul li ul .item13, #top_menu ul li ul .item16 {
	background:url(../images/menu_li_top.png) no-repeat bottom !important;
	height:7px;
	font-size: 0px;/* Добавлено */
 
Дописал, не помогло :confused:
 
Может HasLayout не включается на этих блоках попробуйте здесь пока закоментируйте /*line-height:25px;*/ и /*padding:5px 0;*/
#top_menu ul li ul li {
background:url("../images/menu_li_bg.png") repeat-y scroll 0 0 transparent;
float:none;
/*line-height:25px;*/
margin:0;
/*padding:5px 0;*/
zoom: 1;
}
и допишите zoom: 1 к этим li

Вот этому блоку который их содержит zoom: 1 попробуйте #top_menu ul li ul хотя на нём position:absolute; и HasLayout должен включится, но на всякий случай, пока тестируете.

font-size: 0px оставьте хуже не будет, пока отлаживаете.
Я бы и сам попробовал но у меня IETester почему то на Win 7 64-bit не показывает локальные файлы, а если вставить ссылку из интернета то сайт грузит и я вижу что происходит, а проверить свои изменения пока не могу.
 
Спасибо, никогда бы не додумался использовать zoom.
Осталось 6 добить )))
У меня тоже на win 7 ietester не показывает локальные файлы.
 
Теперь zoom: 1; можно на position:relative; заменить, position:relative; то же должно включить HasLayout но страница будет проходить валидацию. Я обычно zoom: 1; для отладки использую, а потом стараюсь стандартными свойствами добиться того же эфекта.
С IE6 уже сложнее, там вообще всё смещено капитально. И li:hover в нём не будет работать, у него же :hover только на ссылках работает. Нужно или скриптом этот :hover на li как то прикручивать, или без скрипта но добавлять в условных коментариях отдельно для IE 6 код в виде таблице. То что я написал про добавление таблицы будет не совсем понятно, поэтому прикладываю файл с меню, посмотрите и сразу будет понятно. Правда код заграмождается сильно. Это придумал Stu Nicholls c cssplay.co.uk на его сайте много ещё меню интерестных есть.
Вот оно
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху