cccr85

Примерно так, не проверял

<ul class="menu">
   <li>
       <a href="#" title="">Ссылка</a>
       <ul>
		   <li>
		        <a href="#" title="">Ссылка</a>
		        <ul>
				   <li><a href="#" title="">Ссылка</a></li>
				   <li><a href="#" title="">Ссылка</a></li>
				</ul>
		   </li>
		   <li>
		        <a href="#" title="">Ссылка</a>
		        <ul>
				   <li><a href="#" title="">Ссылка</a></li>
				   <li><a href="#" title="">Ссылка</a></li>
				</ul>
		    </li>
		</ul>
   </li>
   <li>
      <a href="#" title="">Ссылка</a>
      <ul>
		   <li>
		        <a href="#" title="">Ссылка</a>
		        <ul>
				   <li><a href="#" title="">Ссылка</a></li>
				   <li><a href="#" title="">Ссылка</a></li>
				</ul>
		   </li>
		   <li>
		        <a href="#" title="">Ссылка</a>
		        <ul>
				   <li><a href="#" title="">Ссылка</a></li>
				   <li><a href="#" title="">Ссылка</a></li>
				</ul>
		    </li>
		</ul>
    </li>
</ul>

$(function(){
	$('.menu').find('a').on('click.menu', function(e){
		e.preventDefault();
		var $parent = $(this).parent();
		if ($parent.hasClass('active')) {
			$parent.removeClass('active');
		} else {
			$parent.parent().find('.active').removeClass('active');
			$parent.addClass('active');
		}
	});
});

.menu ul { display: none; }
.menu li.active > ul { display: block; }

Мой первый ответ здесь, постараюсь помочь, имею опыт верстки около 5ти лет. Все что написали выше, интересно, и безусловно полезно. Я напишу о другом. О скорости. Я пришел к выводу, что чтобы ускорить верстку, нужно по возможности работать в одной программе, и постараться минимизировать переключение между ними. Работаю на двух мониторах, и все равно такой принцип значительно помогает ускорить процесс. Работаю так:

1. Открываю макет в PS, и нарезаю его, попутно думаю как и что я буду делать, как я назову элементы.
-- У меня есть макет и набор картинок --
2. Копирую весь текст из макета в текстовый файл, и в нем делаю html. Написал строку для zen, развернул, перенес текст из файла ниже. На втором мониторе открыт макет, туда я просто смотрю.
-- У меня есть макет, набор картинок и html --
3. Копирую весь html в css, и удаляя создаю болванку для стилей. Например у меня есть такой участок:

<ul class="b-pages">
    <li class="b-pages-item m-active"></li>
    <li class="b-pages-item"></li>
</ul>

и с этого html я делаю такую болванку:

.b-pages {  }
.b-pages-item {  }
.b-pages-item.m-active {  }
.b-pages-item:hover {  }

-- У меня есть макет, набор картинок, html и файл стилей с не заполненными правилами --

4. Этот шаг самый не оптимизированный, и занимает наибольшее время. На одном мониторе у меня открыт PS на втором браузер с консолью, мне приходится работать с двумя программами, с PS и браузером, я копирую стили из макета, и вставляю в css. Попутно поправляю отступы, размеры до PixelPerfect. + пишу js.

-- работа готова --

Буду надеяться, что мой опыт будет вам полезен.

Пришел бы послушать, рассказывать нечего. Если все таки устроите, киньте приглашение в личку пожалуйста.