HTML
<!DOCTYPE html>
<html>
<head>
<title>Meniu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #eee;
display: block;
width: 100%;
min-height: 48px;
border-bottom: 1px solid #ccc;
position: relative;
}
.fir,
.sec {
list-style: none;
text-decoration: none;
position: relative;
}
.fir>li:nth-child(4)>a:before {
content: '\23DA';
padding-right: 10px;
}
.fir>li {
float: right;
}
.fir li a {
text-decoration: none;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
padding: 0 14px;
line-height: 48px;
display: block;
position: relative;
color: #777;
outline: 0;
border-left: 1px solid #cde;
text-transform: uppercase;
font-weight: 900;
text-shadow: 0 1px 0 #fff;
text-align: right;
}
.fir li a:hover {
background: #cde;
}
.fir li:nth-child(2n+1) a:hover {
color: #fff;
}
.fir li:nth-child(1) a:hover {
color: #fde;
background: #000;
}
.fir li:nth-child(3) a:hover {
background: #cfd;
}
.fir>li:nth-child(1)>a:before {
content: "\2302";
font-size: 200%;
line-height: 1;
padding-right: 10px;
}
.fir>li:first-child a {
border-right: 1px solid #cde;
margin-right: 48px;
}
.sec {
margin-top: -1px;
display: none;
background: #eee;
-webkit-box-shadow: 0px 2px 2px 0px rgba(119, 119, 119, 1);
-moz-box-shadow: 0px 2px 2px 0px rgba(119, 119, 119, 1);
box-shadow: 0px 2px 2px 0px rgba(119, 119, 119, 1);
position: absolute;
z-index: 1;
}
.fir li:hover .sec {
display: block;
}
.sec {
-webkit-animation: appear 0.7s ease 0s normal;
animation: appear 0.7s ease 0s normal;
}
@-webkit-keyframes appear {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@keyframes appear {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@media screen and (max-width:480px) {
.fir li {
float: none;
border: 0;
text-align: right;
border-bottom: 1px solid #cde;
}
.fir>li:first-child a {
margin: 0;
border: 0;
}
}
</style>
</head>
<body>
<nav>
<ul class="fir menu-h">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about us">about us</a></li>
<li><a href="#" title="contacts">contacts</a></li>
<li><a href="#" title="our missions">our missions</a>
<ul class="sec">
<li><a href="#" title="custom">custom design</a></li>
<li><a href="#" title="about us">perfect quality</a></li>
<li><a href="#" title="contacts">more unique</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
