Вопрос Скачет навигационное меню при наведении мышью

Пользователь · Регистрация: 27.02.2011

Без наведения курсора мыши на навигационное меню.

При наведении курсора мыши на навигационное меню.

Такое наблюдалось только в опере, можно как-нибудь подправить css код, чтобы навигация нормально реагировала на наведении курсором, а то уже надаела скачка страницы вверх вниз.

.main-nav {list-style:none}

.main-nav li {float:left;width:12.5%;position:relative;-moz-transition:background-color 0.4s ease;-o-transition:background-color 0.4s ease;-webkit-transition:background-color 0.4s ease;-ms-transition:background-color 0.4s ease}

.main-nav li:hover {background:rgba(0,0,0,0.4);-moz-transition:background-color 0.1s ease;-o-transition:background-color 0.1s ease;-webkit-transition:background-color 0.1s ease;-ms-transition:background-color 0.1s ease}

.main-nav a {border-top:0;display:block;text-align:center;position:relative;z-index:2;color:white;padding:5px 10px 10px;font:bold 15px Tahoma,Serif;text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;overflow:hidden}

.main-nav a:before {content:"";display:block;height:33px;background:url(../wi/misc/nav-sprite.png) top center no-repeat}

.main-nav span {display:block;text-align:center;font-size:9px;white-space:nowrap}

.main-nav .forums a:before {background-position:center -40px}

.main-nav .news a:before {background-position:center -80px}

.main-nav .useful a:before {background-position:center -160px}

.main-nav .rules a:before {background-position:center -120px}

.main-nav .newposts a:before {background-position:center -200px}

.main-nav li:before {content:"";position:absolute;top:100%;left:0;right:0;height:8px}

.main-nav .main.current a,.main-nav .forums.current a,.main-nav .news.current a,.main-nav .useful.current a,.main-nav .newposts.current a,.main-nav .rules.current a{color:#222;}

.main-nav  a:hover{text-decoration:none;}

.main-nav .main.current,.main-nav .main:hover {background:#01B0EC;}

.main-nav .main.current:before {background:#006699;}

.main-nav .forums.current,.main-nav .forums:hover {background:#01B0EC;}

.main-nav .forums.current:before {background:#006699;}

.main-nav .news.current,.main-nav .news:hover {background:#01B0EC;}

.main-nav .news.current:before {background:#006699;}

.main-nav .useful.current,.main-nav .useful:hover {background:#01B0EC;}

.main-nav .useful.current:before {background:#006699;}

.main-nav .rules.current,.main-nav .rules:hover {background:#01B0EC;}

.main-nav .rules.current:before {background:#006699;}

Пользователь · Регистрация: 18.07.2012

Цитата:

Сообщение от Sampler

.main-nav li:before {content:"";position:absolute;top:100%;left:0;right:0;height:8px}

Попробуйте height убрать.
Со структурой правда толком не разобрался, надо эксперементировать и посмотреть код...

Пользователь · Регистрация: 27.02.2011

Цитата:

Сообщение от AdaM

Попробуйте height убрать.

спасибо, но не помогло.

Пользователь · Регистрация: 05.02.2012

Код HTML:

.main-nav a {border-top:0;display:block;text-align:center;position:relative;z-index:2;color:white;padding:5px 10px 10px;font:bold 15px Tahoma,Serif;text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;overflow:hidden}

padding:5px 10px 10px уберите.

Код HTML:

.main-nav a {border-top:0;display:block;text-align:center;position:relative;z-index:2;color:white;font:bold 15px Tahoma,Serif;text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;overflow:hidden}

Пользователь · Регистрация: 27.02.2011

aleks63, тоже не то. Подсвечивание кнопки уменьшилось только.

Администратор · Регистрация: 27.02.2009

PHP код:



.main-nav { 
list-style: none outside none;
margin: 0px;
padding:10px 0 0 0px;
}
#toplogo { 
background: url("http://stateiki.net/wi/ia/header.gif") 100% 0% repeat-x #DEDEDC;
height: 87px;
margin: 0px;
}

Пользователь · Регистрация: 27.02.2011

Vector, спасибо!
В опере и хроме нормально отображается, а вот в ФФ навбар уехал вправо.

Администратор · Регистрация: 27.02.2009

PHP код:



.main-nav a:before {   
 background: url("../wi/misc/nav-sprite.png") no-repeat scroll center top transparent;   
 content: "";   
 display: block;    
height: 30px;
}

высоту сделать height: 30px;

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Делаем меню с меняющимися картинками при наведении	Vector	Навигация (navbar, navbits, header и т.д.)	1	03.03.2014 11:11
Вопрос Меню	Wild	Вопросы по vBulletin 3.х	7	22.03.2012 16:06
Проблема Появляется полоска при наведении на кнопку	Sampler	Вопросы по vBulletin 3.х	5	05.03.2012 21:36
Проблема Poshy Tip jQuery Plugin - подсказки при наведении	YURSHAT	JavaScript	1	31.01.2012 15:07
FAQ Всплывающие подсказки при наведении	Vector	HTML, CSS	0	13.12.2009 03:30

Sampler #3
170 МГц Пользователь Вес репутации: 0 Регистрация: 27.02.2011 Адрес: Самара Сообщений: 177 Сказал(а) спасибо: 55 Спасибок 48 в 34 сообщениях	Re: Скачет навигационное меню при наведении мышью - 09.08.2012, 18:02 Цитата: Сообщение от AdaM Попробуйте height убрать. спасибо, но не помогло.

Sampler #5
170 МГц Пользователь Вес репутации: 0 Регистрация: 27.02.2011 Адрес: Самара Сообщений: 177 Сказал(а) спасибо: 55 Спасибок 48 в 34 сообщениях	Re: Скачет навигационное меню при наведении мышью - 09.08.2012, 21:41 aleks63, тоже не то. Подсвечивание кнопки уменьшилось только.

Sampler #7
170 МГц Пользователь Вес репутации: 0 Регистрация: 27.02.2011 Адрес: Самара Сообщений: 177 Сказал(а) спасибо: 55 Спасибок 48 в 34 сообщениях	Re: Скачет навигационное меню при наведении мышью - 09.08.2012, 23:03 Vector, спасибо! В опере и хроме нормально отображается, а вот в ФФ навбар уехал вправо.