Елена Минченко
Елена Минченко

нужно сделать выпадающее меню, точней доделать

ЗАРАНЕЕ ПРЕДУПРЕЖДАЮ ЧТО Я НИЧЕГО В ЭТОМ НЕ РУБЛЮ, CSS УЖЕ ВЕСЬ ПЕРЕСМОТРЕЛ И НИЧЕГО НЕ ПОНЯЛ, ТАК ЧТО ХОТЯ БЫ НЕ КРИТИКУЙТЕ) ) я ничего в этом не понимаю, целый день меняю по всякому код, в инэте ответы ищу, бесполезно! мне нужно чтобы как фон в каждой "ячейке" (не знаю как ещё их назвать) была картинка, которая при наведении мыши менялась на другую такого же размера, а ячейки таблицы были размером с фоновые картинки. и было бы вообще идеально если бы можно было настраивать ширину меню в зависимости от разрешения экрана, чтоб я мог в процентах её задать. меню делаю как на http://worldoftanks.ru/
вот что у меня в HTML:







































а вот что в CSS:
#menu {
padding: 0;
margin: 0;
font-size: 100%;
font-family: Georgia;
}
#menu li {
list-style: none;
float: left;
height: 33px;
padding: 0;
margin: 0;
width: 150px;
text-align: center;
background: #171717;
position: relative;
padding-top: 12px;
}
#menu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 150px;
display: none;
position: absolute;
left: 0;
top: 45px;
}
#menu li ul li {
float: none;
height: 33px;
margin: 0;
width: 150px;
text-align: center;
background: #7F7F7F;
}
#menu li a {
display: block;
width: 150px;
height: 33px;
color: #fff;
text-decoration: none;
}
#menu li:hover ul, #menu li.jshover ul {
display: block;
}
#menu li:hover, #menu li.jshover {
background: #424242;
}

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



есть картинки и до наведения и после. И, да, ещё должно выпадать меню и там тоже при наведении картинка меняется. проблема в том что ширина у главных кнопок в меню может быть только одинаковая, а мне нужно чтоб как на скрине: какую картинку вложил, такая и ширина. у второстепенных тоже самое! да и вообще для главных кнопок должен быть один фон до наведения, и один после, а как мне в каждую кнопочку свою картинку вложить?

Антон
Антон

Так вам нужно, чтобы только картинка менялась или появлялось выпадающее меню при наведении? Все, что вы написали касается 2-го. Картинка никак не изменится.
Для изменения картинки при наведении надо сначала нарисовать ее в ОДНОМ БЛОКЕ из двух картинок (первоначальная и после наведения, желательно в Фотошопе) .
Самый простой при этом код CSS:
A.rollover {
background: url('images/button10.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 216px; /* Ширина рисунка в пикселах */
height: 35px; /* Высота рисунка */
}

A.rollover:hover {
background-position:
0px /* Смещение по горизонтали */
-35px; /* Смещение вверх по вертикали */
}
Далее прописать в HTML-коде:

Есть другие способы.. .

ОС
Оксана Салистая

Я на сайте с помощью CSS это реализовал

li a:hover background #1
li a:link background #2



Похожие вопросы
помогите сделать размер окна выпадающего меню меньше (компактнее)
Есть горизонтальное выпадающее меню в низ, но как его переделать чтобы он выпадал в верх?
Выпадающие меню на css3, html.
Как сделать выпадающее меню DLE?
Joomla выпадающее меню с графикой
Excel. Как сделать зависимость одного выпадающего меню от другого?
Вертикальное выпадающее меню в HTML. Помогите сделать выпадающее меню в HTML...
Тема: Настройка выпадающего меню для wordpress.
Как сделать выпадающее меню в 3 колонки?
Вопрос по Joomla 2.5 Как сделать такое выпадающее меню меню?