Помогите с css (выпадающий список)

MJ
На сайте с 29.12.2009
Offline
44
955

Собственно такой вопрос, скачал шаблон, там есть такая штука как "выпадающее меню", но в шаблоне, к сожалению классы не прописаны.

Шаманил уже как можно, но ввиду того, что мои знания в css не совсем высоки (хотя я учусь постепенно), но все же не получается.

Имеется меню:

<div class="topmenu-block">
<div class="main">
<div class="top-menu-block">
<ul>
<li>
<a href="/moda/" class="menu-link">Мода</a>
</li>

<li>
<a href="/dom/" class="menu-link">Дом</a>
</li>

<li>
<a href="/zdorove/" class="menu-link">Здоровье</a>
</li>

<div style="clear: both;"></div>
</ul>

</div>
</div>

Есть css стиль:

	.topmenu-block{
background: url(../images/topmenu-block.png) center 0 no-repeat;
height: 63px;
position: relative;
z-index: 8;
}

.top-menu-block{
height: 50px;
position: relative;
z-index: 90;
margin: 0 auto;
width: 940px;
}


.menu-link{
font-size: 18px;
color: #000;
font-weight: bold;
height: 47px;
text-align: center;
display: block;
position: relative;
z-index: 90;
background: url(../images/list.png) left center no-repeat;
padding: 0 20px 0 30px;
line-height: 47px;
}

.menu-link:hover{
color: #4c6073;
}

li:first-child .menu-link{
background: none;
}

.activ{
color: #4c6073;
}

.top-menu-block ul{
margin: 0;
padding: 0;
position: relative;
z-index: 99;
}

.top-menu-block li{
list-style-type: none;
float: left;
position: relative;
height: 50px;
z-index: 99;
}


.hidden-menu-block{
display: none;
text-align: left;
position: absolute;
top: 50px;
left: 0px;
width: 178px;
z-index: 90;
}

.hidden-menu-link{
display: block;
font-size: 14px;
color: #000;
line-height: 16px;
padding: 3px 0 3px 15px;
margin: 0 14px;
width: 135px;
position: relative;
z-index: 90;
background: #fff;
}

.hidden-menu-link:hover{
background: url(../images/zvezda-menu.png) left center no-repeat;
}

.hidden-menu-top{
background: url(../images/hidden-menu-top.png) 0 top no-repeat;
height: 21px;
}

.hidden-menu-repeat{
background: url(../images/hidden-menu-repeat.png) 0 0 repeat-y;
}

.hidden-menu-bottom{
background: url(../images/hidden-menu-bottom.png) 0 bottom no-repeat;
height: 10px;
}

Еще есть код jquery:

$('.top-menu-block li').hover(
function() {
$(this).find('.hidden-menu-block').css({'display':'block'});
$(this).find('.menu-link').addClass('activ');
}, function() {
$(this).find('.hidden-menu-block').css({'display':'none'});
$(this).find('.menu-link').removeClass('activ');
});

Помогите пожалуйста срастить. Т.е. сейчас есть меню вида:

<li>
<a href="/moda/" class="menu-link">Мода</a>
</li>

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

<li>
<a href="/moda/" class="menu-link">Мода</a>
<ul>
<li>
<a href="/moda/" class="menu-link">Мода 1</a>
</li>

<li>
<a href="/moda/" class="menu-link">Мода 2</a>
</li>

</ul>
</li>

Заранее очень благодарен.

Nomiki
На сайте с 28.03.2012
Offline
117
#1

Не совсем понятно - что именно не работает? само меню-то в коде создано?

Я бы jQuary выкинул и сразу в .CSS стили забил для "hover" и всё.

Вот тут посмотрите урок, и перезалейте классы под свои ;)

Заказать дизайн сайта: nomiki@yandex.ru | Портфолио: behance.net/nomiki | ВК: vk.com/nmk_msk
MJ
На сайте с 29.12.2009
Offline
44
#2
Nomiki:
Не совсем понятно - что именно не работает? само меню-то в коде создано?
Я бы jQuary выкинул и сразу в .CSS стили забил для "hover" и всё.
Вот тут посмотрите урок, и перезалейте классы под свои

Спасибо большое за ответ. Вы не совсем меня поняли. Там уже все настроено.

Я просто не пойму как правильно в шаблон вписать сам выпадающий список. Перепробовал уже по-всякому, как только можно... Вот и прошу на основе css подсказать как правильно его вписать в шаблон.

p.s. Извините, если уж совсем примитивный вопрос задал. Но мне он не под силу...

дани мапов
На сайте с 06.09.2012
Offline
197
#3

Вложенному тегу <ul> добавить класс hidden-menu-block. Получится приблизительно так:


<div class="topmenu-block">
<div class="main">
<div class="top-menu-block">
<ul>
<li>
<a href="/moda/" class="menu-link">Мода</a>
<ul class="hidden-menu-block">
<li>
<a href="/moda/" class="menu-link">Мода 1</a>
</li>

<li>
<a href="/moda/" class="menu-link">Мода 2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
MJ
На сайте с 29.12.2009
Offline
44
#4

Проблему решил так:

<li>
<a href="/dom/" class="menu-link">Дом</a>
<div class="hidden-menu-block">
<div class="hidden-menu-top"></div>
<div class="hidden-menu-repeat">
<a href="/dom/" class="hidden-menu-link">Выпадающий список</a>
</div>
<div class="hidden-menu-bottom"></div>
</div>
</li>

Все отображается как нужно. Только вот сомневаюсь правильно ли ?

Root77
На сайте с 18.03.2012
Offline
73
#5
MusicJam:
Проблему решил так:


Все отображается как нужно. Только вот сомневаюсь правильно ли ?

Если работает - значит правильно. Но решение черезжопное. Не проще будет так.

Кто имеет нож, да возьмет, а кто не имеет, да продаст ризу и купит нож

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