Перейти к содержимому

Сервис обмена электронных валют


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

#1 winston3d

winston3d
  • Пользователь
  • 135 сообщений
  • Репутация: 2
0

Отправлено 11 Январь 2013 - 19:03

Всем привет.

Третий день пытаюсь сделать выпадающее горизонтальное меню вот для этого шаблона при помощи CSS. За основу беру вот этот урок (Вариант 2) но там крайне мало описания работы, а точнее вообще нету описания((
Помогите пожалуйста осуществить задуманное, по идее нужно всего лишь подправить CSS но не совсем понимаю принцип работы кода, указанного в уроке, а по этому и не догоняю куда вставлять нужные строки.
Должно получиться примерно так

Прикрепленные изображения

  • page.png

 

 

  • 0

#2 verstaka

verstaka
  • Пользователь
  • 6 сообщений
  • Репутация: 2

Отправлено 11 Январь 2013 - 19:47

Так там же все просто, и объяснять нечего. http://jsfiddle.net/verstaka/xz7UZ/1/ - простой пример, вложенное выпадающее меню убираем из виду css-свойством display: none, при наведении на пункты меню присваиваем display: block.
  • 0

#3 winston3d

winston3d
    Topic Starter
  • Пользователь
  • 135 сообщений
  • Репутация: 2

Отправлено 11 Январь 2013 - 20:55

Примерно разобрался - дописал вот эти строки в CSS

#header .nav-box ul li ul {display: none;}
#header .nav-box ul li:hover ul {display: block;}
#header .nav-box ul li ul li a {list-style: none;float: left;height: 33px;padding: 0;margin: 0;width: 150px;text-align: center;background: rgb(127, 127, 127);position: relative;padding-top: 12px;}
#header .nav-box ul li ul li a:hover {list-style: none;float: left;height: 33px;padding: 0;margin: 0;width: 150px;text-align: center;background: #424242;position: relative;padding-top: 12px;}
Но отображается криво - всё смещается вправо.
  • 0


Оформление форума – IPBSkins.ru