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

[record222]

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

Собственно вот мой код который я переделал... Пробовал разными способами... Но увы Строго пожалуйста не пинайте
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; }

.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

<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

.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; }

.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; }

<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>

[InternetStranger]

Если отбросить академические цели, то быстрее и проще воспользоваться готовыми решениями: сотни вариантов отлично ищутся запросами типа css-framework, css dropdown menu.

http://css-framework.ru/
http://lwis.net/free-css-drop-down-menu/

Я себе подобрал один вариант по второй ссылке, когда надо было по-быстрому наваять многоуровневую менюшку под iPad. И оказалось, что половина моих собсвенных CSS/JS-наработок не очень-то дружат с touch-устройствами.

[yaskin]

http://cssmenumaker.com/