Näytä Toggle menu >>
Hover Sub Navs
Alavalikko avautuu kun hiirin on linkin päällä
HTML
<![CDATA[
<nav id="nav">
<ul>
<li>
<a href="#">Link 1 ▼</a>
<ul>
<li><a href="##">Sub 1.1</a></li>
<li><a href="##">Sub 1.2</a></li>
<li><a href="##">Sub 1.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 2 ▼</a>
<ul>
<li><a href="##">Sub 2.1</a></li>
<li><a href="##">Sub 2.2</a></li>
<li><a href="##">Sub 2.3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
]]>
CSS
<![CDATA[
#nav ul{
display: flex;
list-style-type: none;
padding: 0;
}
#nav ul li a{
display: block;
background-color: rgb(48, 48, 48);
padding: 1em 2em;
position: relative;
}
#nav ul li ul{
display: none;
position: absolute;
}
#nav ul li:hover > ul{
display: block;
}
#nav a, #nav a:visited{
color: white;
}
#nav a:hover{
color: orange;
}
]]>