Нужна помощь с выпадающим меню

D
На сайте с 09.10.2011
Offline
15
632

Приветствую! Есть проблема. Нужно сделать выпадающее меню с картинкой. То есть чтобы получилось следующее:

Надо чтобы картинки и ссылка были как бы одним блоком чтоли. Само меню сделал, а вот картинку когда вставляю все едет. Может нетуда вставляю. Вот код:

HTML


<ul class="my_menu">
<li><a href="#"><img src="my_img.jpg />"Провод СИП</a> <!-- пробовал так -->
<ul>
<li><a href="#">- IEK</a></li>
<li><a href="#">- Арматура для СИП 4</a></li>
<li><a href="#">- Арматура для СИП 6</a></li>
</ul>
</li>
</ul>

CSS


.my_menu li{
float: left;
position: relative;
display: block;
width: 188px;
background: url(../images/my.png) no-repeat right;
padding-right: 3px;
}
.my_menu li a:link, .my_menu li a:visited{
display: block;
padding: 38px 21px 37px 17px;
font-size: 20px;
font-family: Arial;
text-decoration: none;
color: #000;
}
.my_menu li a:hover{
background: url(../images/menu_bg.png) repeat-x;
}
.my_menu ul{
width: 188px;
position: absolute;
left: -9999px;
top: 98px;
background: #fff;
padding-bottom: 10px;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-khtml-border-radius: 0 0 10px 10px;
}
.my_menu ul li{
padding-top: 1px;
float: none;
background: #fff;
width: 180px;
}
.my_menu ul a{
white-space:nowrap;
display: block;
}
.my_menu li:hover ul{
left: 0;
}
.my_menu li:hover ul li a:link, .my_menu li:hover ul li a:visited{
margin: 0;
padding: 0 0 0 22px;
font-family: 'MyriadPro-It';
font-size: 16px;
color: #559abb;
font-style: italic;
}
.my_menu li:hover a{
background: #fff;
}
.my_menu li:hover ul a:link, .my_menu li:hover ul a:visited{
text-decoration: underline;
}

Помогите пожалуйста. Спасибо!

P.S. Еще вопрос по поводу кроссбраузерности. Вот это меню в Хроме и Опере работает нормально. По идее в Мозиле тоже должно работать нормально, но появляется скролл, а при наведении на пункты скролл исчезает, и сайт как бы прыгает. Доктип прописан. Что это может быть. Спасибо

iren K
На сайте с 28.12.2008
Offline
222
#1
Digidie:
Еще вопрос по поводу кроссбраузерности

через яву нужно реализовать (я так делаю) - проблем с браузером не будет

c уважением Iren
KV
На сайте с 22.12.2011
Offline
88
#2

Как минимум здесь

<li><a href="#"><img src="my_img.jpg />"Провод СИП</a> <!-- пробовал так -->

<img src="my_img.jpg />" замените на <img src="my_img.jpg" />

ну и попробуйте дать .my_menu img float: left;

Как бы на тебя ни давили, никогда не соглашайся на роль, что тебе не нравится *** http://handmade.tigress.com.ua
D
На сайте с 09.10.2011
Offline
15
#3
iren K:
через яву нужно реализовать (я так делаю) - проблем с браузером не будет

Можно чуть подробнее.

iren K
На сайте с 28.12.2008
Offline
222
#4
Digidie:
Можно чуть подробнее.

моня, но бесплатно (т.е. даром) не расскажу..ибо нефиг

SeVlad
На сайте с 03.11.2008
Offline
1609
#5
iren K:
не расскажу

Оно и не надо.. Вебмастер, не отличающий яву от яваскрипта - это всё равно что академик, путающий таблицу умножения с орфографией.

Digidie, кури например это (а вообще там оч много интересных решений)

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
D
На сайте с 09.10.2011
Offline
15
#6
SeVlad:
Оно и не надо.. Вебмастер, не отличающий яву от яваскрипта - это всё равно что академик, путающий таблицу умножения с орфографией.

Digidie, кури например это (а вообще там оч много интересных решений)

На счет что ненадо это точно))) А по поводу ссылки спасибо, ей правда не пользовался, но благодаря ей нашел что нужно на этом же сайте. Вместо left: -9999px; сделал display:none и в браузерах все нормально стало.

P.S. Увидел в подписи ссылку на вопросы по WP. Щас делаю блог. Тоже пригодится🍿. Еще раз спасибо)

fa2m
На сайте с 07.09.2011
Offline
23
#7
SeVlad:
Оно и не надо.. Вебмастер, не отличающий яву от яваскрипта - это всё равно что академик, путающий таблицу умножения с орфографией.

Digidie, кури например это (а вообще там оч много интересных решений)

Так iren K и имел ввиду JavaScript, Ваш язвительный комментарий был неуместен

Встречи в Днепре /ru/forum/736064 (/ru/forum/736064) Беклинк за копейку. Удобный сервис анализа обратных ссылок. (http://backlink.page-weight.ru/)
SeVlad
На сайте с 03.11.2008
Offline
1609
#8
fa2m:
Так iren K и имел ввиду JavaScript,

Именно поэтому я и написал то что написал.

И если кое-кто не понимает разницу (а тем более говорит не о том, о чем думает) - не место ему в вэб-мастерах. Да ещё и иметь при этом наглость денег просить..

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий