Не выпадает меню

@Record222 · Регистрация: 20.09.2009

Author24 — интернет-сервис помощи студентам

Доброе время суток, друзья!
Помогите пожалуйста решить проблему. Уже 2 недели не могу сделать выпадающее меню...

Собственно вот мой код который я переделал... Пробовал разными способами... Но увы

Строго пожалуйста не пинайте:o
CSS

CSS

.navi  {padding:5px 5px 0 7px; font-weight:bold;  color:#fff; text-shadow: 0 1px 0 #154a77;}
.navi li {list-style-type:none; margin:-4px 0 0 0; } 
.navi ul{width:100%;}
.navi a{padding-left:10px; display:block; height:39px; background:url('../images/navilinks.png') no-repeat; line-height:31px; color:#edebe9; text-decoration:none;} 
.navi a:hover{background-position:0 -39px; color:#fff; text-decoration:none;}
.navi a span{padding-left:22px; }
 
.randBlock ul {display:none;}
.randBlock a:hover ul li{display:block;}
.randBlock li:hover ul{display:block;}
.randBlock a:hover ul{display:block;}
.randBlock li:hover ul li{display:block;}

HTML

HTML5

<div class="block_l">
<div class="block_l_b">
<div class="block_l_h"><div>Меню навигации</div></div>
<div class="block_l_c navi"><ul class="reset">
<div class="randBlock"><li><a href="#"><span>Категория меню</span></a></li><ul>
                        <li>Ьесь</li>
                        <li>temfst</li></ul></div>
<li><a href="#"><span>Категория меню</span></a></li>
</ul></div>
</div>
</div>

А вот оригинальные файлы:
CSS

CSS

.navi  {padding:5px 5px 0 7px; font-weight:bold;  color:#fff; text-shadow: 0 1px 0 #154a77;}
.navi li {list-style-type:none; margin:-4px 0 0 0; } 
.navi ul{width:100%;}
.navi a{padding-left:10px; display:block; height:39px; background:url('../images/navilinks.png') no-repeat; line-height:31px; color:#edebe9; text-decoration:none;} 
.navi a:hover{background-position:0 -39px; color:#fff; text-decoration:none;}
.navi a span{padding-left:22px; }

HTML5

<div class="block_l">
<div class="block_l_b">
<div class="block_l_h"><div>Меню навигации</div></div>
<div class="block_l_c navi"><ul class="reset">
<li><a href="#"><span>Категория меню</span></a></li>
<li><a href="#"><span>Категория меню</span></a></li>
</ul></div>
</div>
</div>

@Taatshi · 02.08.2012, 15:48

Вы привели не весь нужный код. Главная строка, через которую собственно и происходит эффект выпадения -

HTML5

1	<div class="block_l_c navi"><ul class="reset">

Я не вижу стилей для класса reset

@Record222 · 02.08.2012, 16:04 **[ТС]**

Сообщение от Taatshi

Вы привели не весь нужный код. Главная строка, через которую собственно и происходит эффект выпадения -

HTML5

1	<div class="block_l_c navi"><ul class="reset">

Я не вижу стилей для класса reset

Извиняюсь, не думал, что они нужны...

CSS

.block_l {width:236px;}
.block_l_h {height:65px; background:url('../images/block_l_bg.png') no-repeat 0 0;}
.block_l_h div {font-weight:bold;  color:#fff; text-shadow: 0 1px 0 #154a77; padding:24px 0 0 22px;  }
.block_l_c {padding:5px 5px 0 5px; background:url('../images/block_l_bg.png') repeat-y -236px 0;}
.block_l_b {padding:0 0 20px 0; background:url('../images/block_l_bg.png') no-repeat -472px bottom;}
 
.reset, .reset li { list-style: none; padding: 0; margin: 0; }

@Taatshi · 02.08.2012, 16:11

Чувствую, долго буду всех стилей просить)) Так что давайте так....

Обычно прописывают для пункта меню, который должен выпадать (второй уровень меню)

CSS

1
2
3

.navi li ul {
display: none;
}

при наведении

CSS

1
2
3

.navi li:hover ul {
display: block;
}

то есть привязываются к li и ul а не к ссылке

В оригинальном css это есть (хотя тут привязка к ссылке, это не всегда удобно - нужно наводить мышку точно на ссылку)

CSS

1 2	.randBlock ul {display:none;} .randBlock a:hover ul li{display:block;}

у Вас - не вижу.

@Record222 · 02.08.2012, 16:47 **[ТС]**

Не сильно понял, честно говоря...

Меню второго уровня создается вот так

HTML5

<li> Название
<ul> 
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul> </li>

Правильно?
То есть мне нужно переделать его по этой схеме?

Прикрепляю CSS файл: styles.css
Прикрепляю HTM(TML) файл: side_left.tpl

@Taatshi · 02.08.2012, 17:17

Послушайте, в Вашем коде - полная каша) Давайте начнем все с начала. Вот смотрите.

В оригинальном файле

<div class="block_l_c navi">
<ul class="reset">
<li><a href="#"><span>Категория меню</span></a></li>
<li><a href="#"><span>Категория меню</span></a></li>
</ul></div>

а у Вас

<div class="block_l_c navi">
<ul class="reset">
<div class="randBlock">
<li><a href="#"><span>Категория меню</span></a></li><ul>
<li>Ьесь</li>
<li>temfst</li>
</ul>

то есть между ul и li вклинился еще какой-то непонятный совершенно блок и нарушил структуру списка. Так делать нельзя.) И еще какой-то непонятный ul появился...

Почитайте вот для начала http://htmlbook.ru/html/ul

А схемка у Вас правильная

PS Прошу прощения у модератора, что не оформила код тегами - необходимо было показать выделением на ошибку.

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.08.2012, 17:17	6
	Послушайте, в Вашем коде - полная каша) Давайте начнем все с начала. Вот смотрите. В оригинальном файле <div class="block_l_c navi"> <ul class="reset"> <li><a href="#"><span>Категория меню</span></a></li> <li><a href="#"><span>Категория меню</span></a></li> </ul></div> а у Вас <div class="block_l_c navi"> <ul class="reset"> <div class="randBlock"> <li><a href="#"><span>Категория меню</span></a></li><ul> <li>Ьесь</li> <li>temfst</li> </ul> то есть между ul и li вклинился еще какой-то непонятный совершенно блок и нарушил структуру списка. Так делать нельзя.) И еще какой-то непонятный ul появился... Почитайте вот для начала http://htmlbook.ru/html/ul А схемка у Вас правильная PS Прошу прощения у модератора, что не оформила код тегами - необходимо было показать выделением на ошибку. 0