Estoy haciendo un menú desplegable con varios enlaces. Como veréis hay que dar una altura en focus para que funcione bien. Como tengo varios menús con alturas diferentes, estoy intentando poner el ":focus" directamente en <nav>, pero no consigo que funcione. ¿Se puede hacer?
Esta es una de las formas que he intentado ponerlo en directamente en la tag.
Código HTML :
<nav class="linksdesplega" contenteditable="true" style=":focus height:60px;">
Y así es como funciona, poniéndolo en head o en un archivo externo.
Código HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.linksdesplega{
width:200px;
height:18px;
background-color:#F4F5F9;
overflow:hidden; /*oculta todo, solo se ve la altura definida en height*/
transition: height 1s;
-webkit-transition: height 1s;
}
.linksdesplega:focus{
height:100px; /*altura del menu que despliega*/
outline:none;
}
</style>
</head>
<body>
<ul>
<nav class="linksdesplega" contenteditable="true">
<li class="barras">menú </li>
<div contenteditable="false">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</div>
</nav>
</ul>
</body>
</html>
