CSS
/* меню */
.nav {
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 7px 0;
background-color: green;
text-align:center;
}
.nav li {
padding: 10px 15px;
list-style: none;
display: inline-block;
*display:inline; /* ie7 */
}
.nav a {
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
/* меню по центру */
.nav .center ul {
text-align: center;
}
.nav .sub-menu, .nav .toggle {
display:none;
}
@media screen and (max-width: 511px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
display: block;
padding:0;
height:50px;
}
.nav a {
display: none;
background-color:orange;
text-align: center;
}
.nav li {
transition:1s;
height: 49px;
line-height:49px;
margin:0;
padding:0;
}
.nav .sub-menu {
display: block;
position: absolute;
opacity:1;
height:50px;
width:100%;
}
.nav .toggle {
display: block;
position: absolute;
top:5px;
margin:0;
right:5px;
padding: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
/* при наведении на пункты меню */
.nav ul:hover {
transition:0.3s;
border-top:1px solid black;
}
.nav ul:hover a {
display: block;
border: 1px solid black;
border-top:none;
}
.nav ul:hover li {
opacity:1;
}
.nav ul:hover .sub-menu {
opacity:0;
}
.toggle span {
opacity:1;
position: absolute;
top: 50%;
left: 15%;
right: 15%;
height: 4px;
background: white;
}
.toggle span::before,
.toggle span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
content: "";
}
.toggle span::before {
top: -9px;
}
.toggle span::after {
bottom: -9px;
}
}
