Css всплывающее меню: Как сделать всплывающее меню при наведении

Разное 

Выпадающее меню скрывается за слайдером — Вопрос от pack-solution

  • Вопросы
  • Дизайн сайта
  • Выпадающее меню…

Здравствуйте!

На сайте установлено выпадающее меню с CSS:

Если на главной странице установить слайдер паралельно меню, то выпадающая часть скрывается за слайдером, с другим контентом таких проблем нет.

Как это можно исправить?

CSS  стиль меню:

#menuVertical{width:100%;height:auto;}
 #menuVertical ul{
 display:block;
 width:100%;
 height:auto;
 margin:0px;
 padding:0px;
 list-style:none;
 position:relative;
 }
 #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
 #menuVertical ul li a{
 position:relative;
 display:block;
 width:100%;
 height:auto;
 box-sizing:border-box;
 font-size:13px;
 text-transform:uppercase;
 font-weight:bold;
 color:#ffffff;
 line-height:1. 2em;
 padding:10px 15px;
 background:#b8b8b8;
 border-top:1px solid #ffffff;
 text-decoration:none;
 }
 #menuVertical ul li:first-child a{border:0px;}

 #menuVertical ul li a:hover, #menuVertical ul li:hover a{
 background:#363636;
 }
 #menuVertical ul li ul{
 position:absolute;
 top:0px;
 left:100%;
 display:none;
 width:auto;
 }

 /*******показываем выпадашку при наведении ********/
#menuVertical ul li:hover ul{display:block;}
 #menuVertical ul li ul li a{
 white-space:nowrap;
 text-transform:none;
 padding:5px 20px;
 }
 #menuVertical ul li ul li a:hover{
 background:#b8b8b8;
 color:#ffffff;
 }

Заранее Спасибо

Закрыто с пометкой: Вопрос решен!

  • меню
  • меню-сайта
  • дизайн
| Автор: pack-solution | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

голоса: 0

голоса: 0

Подборка меню с JQuery и CSS3 для сайта

И снова здравствуйте дорогие читатели блога. Сегодня хочу Вам представить подборку JQuery меню. Часто вебмастера думают, какое бы меню сделать для своего сайта? Чтобы оно было легкое, красивое и удобное. Вот как раз эта подборка, я думаю, даст ответы по этому поводу. Ну да ладно, меньше слов ближе к делу.

1. JQuery меню «Sweet Menu».

Замечательное выезжающее меню с левой стороны экрана с картинками.

Пример ι Скачать исходники

2. Меню с авто прокруткой.

Бесподобное JQuery меню. При наведении меню выезжает вверх, и автоматически прокручивается.

Пример ι Скачать исходники

3. «Fancy menu» с использованием JQuery и CSS.

Наверное самое простое и красивое меню. Есть выбор цветов. Это меню отлично впишется в дизайн любого сайта.

Пример ι Скачать исходники

4. JQuery меню с вращением и масштабированием.

Отличное меню с не большими значками, которые вращаются при наведении.

Пример ι Скачать исходники

5. Выпадающее меню с использованием JQuery.

Простое выпадающее меню с ослабляющим эффектом.

Пример ι Скачать исходники

6. Галерея и навигация с миниатюрами.

Прекрасная галерея с навигацией из миниатюр, которые в свою очередь, прокручиваются автоматически, когда пользователь вращает мышь вправо или влево.

Пример ι Скачать исходники

7. JQuery меню с картинками и подсказками.

При наведении на меню, картинка скользит вниз, а подсказка с ссылками поднимается снизу. Замечательная реализация.

Пример ι Скачать исходники

8. Меню «jStack» с использованием JQuery.

Не плохое меню для социальных закладок. Можно переделать и под свои картинки. Нажимаем на сердечко в нижнем левом углу.

Пример ι Скачать исходники

9. JQuery меню с “kwicks” эффектом.

Не плохое меню из блоков. При наведении блок увеличивается.

Пример ι Скачать исходники

10. Мощное выпадающее меню.

При наведении на блок выпадает меню с ссылками.

Пример ι Скачать исходники

11. Всплывающее меню с JQuery.

Классное меню. При наведении на блок меню плавно всплывает.

Пример ι Скачать исходники

12. Горизонтальное анимированное меню на JQuery.

Отличное анимированное горизонтальное меню с красивым эффектом.

Пример ι Скачать исходники

13. Меню с слайдами и с списком на JQuery и CSS3.

Замечательное меню для оформления в тёмных тонах. При наведении выскальзывает миниатюра с списком.

Пример ι Скачать исходники

14. Меню из кубиков с JQuery.

Замечательное меню из маленьких кубиков. Очень красивый эффект при нажатии на меню. Посмотрите пример!

Пример ι Скачать исходники

15. Красивое меню с картинками.

Пример ι Скачать исходники

На сегодня пока что всё. Я думаю, что из этих примеров Вы выберете подходящую навигацию для вашего сайта. Всем удачного выбора и до свидания.

раскрывающихся список • Pico.css

выпадают с < Подробная информация Роль = "Список" > в качестве обертки и < Сводная сумма > и < UL > As Direct Ditw .

Для согласованности стиля с элементами формы выпадающие списки по умолчанию имеют стиль