Выпадающее меню на html+css, нужна инспекция кода

[aqua.77]

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

 <ul class="q1">
 
<li class="q2">
<a href="#">123</a><ul class="q3"><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li></ul>
</li>

<li class="q2"><a href="#">123</a><ul class="q3"><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li></ul></li>
</ul>

* {
  box-sizing: border-box;
  margin:0;
  padding:0;  
}
.q1{
	margin-left:40px;
	margin-top:50px;
	border:1px black solid;
	text-align:center;
}
.q2{
	display:inline-block;
	position:relative;
	vertical-align:top;
	z-index:1000;
	overflow:hidden;
	height:42px;
	transition:all 1s;
	width:17%;
}
.q2 a{
	display:inline-block;
	text-decoration:none;
	padding:12px 0px;
	width:100%;
	text-align:center;
	background:black;
}
.q3{
	position:absolute;
	top:-90px;
	right:0;	
	width:100%;
	transition:all 1s;
	z-index:-1;
}
.q3 li{
	display:block;
}
.q3 a{
	display:inline-block;
	padding:12px 0px;
	width:100%;
	text-align:center;
	background:red;
	margin-bottom:3px;
}
.q2:hover .q3{
	top:45px;
}
.q2:hover{
	height:177px;
}
.q3 li:last-child a{
	margin-bottom:0;
}

 

[wwt]

Лучше оформляйте код в песочнице, к примеру тут https://jsfiddle.net/

[aqua.77]

1 час назад, wwt сказал:

код в песочнице

Та так удобнее https://jsfiddle.net/nduyuhbr/. Я первый раз попробовал сделать резиново-выпадающее меню, и есть ощущение что что-то сделал не корректно

[wwt]

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

[aqua.77]

1 час назад, wwt сказал:

вложенные UL растягивают главный список по вертикали при выезжании

И правда... Я нашел выход обернуть UL и сделать его абсолютно-позицианированным  в элементе NAV...

q1{
	position:absolute;
	width:100%;
	top:0;left:0;
}
nav{
	position:relative;
	margin:50px 0 0 20px;
}

Но что-то идёт не так. https://jsfiddle.net/zhzhjxo8/

Edited November 18, 2016 by aqua.77

[wwt]

Я бы посоветовал делать поверх контента не всё меню, а только выпадающие ul

[aqua.77]

1 час назад, wwt сказал:

делать поверх контента не всё меню, а только выпадающие ul

Можете в песочнице продемонстрировать? просто я запутался

[wwt]

что-то типо https://jsfiddle.net/2ohktw18/

[aqua.77]

1 час назад, wwt сказал:

что-то типо https://jsfiddle.net/2ohktw18/

Спасибо, буду разбираться 

[aqua.77]

4 часа назад, wwt сказал:

у вас вложенные UL растягивают главный список

Ваш пример был ясен, но я хотел чтобы подменю плавно выползало и не влияло на нижестоящий контент, ещё и резиновое. В общем вот что я напридумал https://jsfiddle.net/2ohktw18/2/