<html lang="en">
<head><meta charset="utf-8">
<title>Dropdown menu</title>
</head> <body> <nav><div class="nav-1">
<a href="#">Element-1</a>
<ul class="sub-nav-1">
<li><a href="#">Subelement</a></li>
<li><a href="#">Subelement</a></li>
<li id="sub-sub-nav"><a href="#">Subelement Subelem</a>
<ul class="sub-nav-1">
<li><a href="#">Subelement</a></li>
<li><a href="#">Subelement</a></li>
<li><a href="#">Subelement Subelem</a></li>
</ul> </li> </ul> </div><div class="nav-2">
<a href="#">Element-2</a>
<ul class="sub-nav-2">
<li><a href="#">Subelement</a></li>
<li><a href="#">Subelement</a></li>
<li><a href="#">Subelement Subelement</a></li>
</ul> </div><div class="nav-3">
<a href="#">Element-3</a>
<ul class="sub-nav-3">
<li><a href="#">Subelement</a></li>
<li><a href="#">Subelement</a></li>
<li><a href="#">Subelement Subelement</a></li>
</ul> </div> </nav> </body>nav{
nav{background:#000;
color:#fff;
font:22px sans-serif;
}
nav > div{
display:inline-block;
margin:0 30px;
padding:0;
position:relative;
}
a{text-decoration:none;
color:lightblue;
display:block;
}
div > ul{
display:none;
position:absolute;
list-style-type:none;
margin:0;
padding:10px;
white-space:nowrap;
}
div > ul > li{
padding-bottom:10px;
}
a:hover{
background:#ccc;
}
.nav-1:hover > ul,
.nav-2:hover > ul,
.nav-3:hover > ul{
background:#000;
display:block;
position:absolute;
}
div > ul > li > ul{
list-style-type:none;
color:#000;
background:#c00;
margin:0;
padding:0;
display:block;
position:absolute;
bottom:-35px;
right:-210px;
}
#sub-sub-nav:hover > ul{
display:block;
}