body {
margin:0;
padding:0;
}
.nav {
position:relative;
background-color:#fff;
height:78px;
width:100%;
border-bottom:1px solid #DADADA;
}
.nav .menu {
position:absolute;
right:20px;
top:30px;
width:28px;
display:none;
}
.nav ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav ul li {
height:78px;
width:168px;
line-height:78px;
text-align:center;
display:inline-block;
}
.nav ul li:hover {
cursor:pointer;
}
.nav ul li a {
text-decoration:none;
color:#666;
padding-bottom:8px;
}
.nav ul li .actived {
border-bottom:3px solid #EE5C42;
}
@media only screen and (max-width:878px) {
.nav .menu {
display:inline;
margin-right:5px
}
.nav ul {
position:absolute;
right:0;
text-align:right;
top:78px;
display:none;
}
.nav ul li {
display:block;
border:1px solid #dadada;
height:58px;
line-height:58px;
width:98px;
}
.nav ul li a {
display:block;
padding-bottom:0;
}
.nav ul li .actived {
border-bottom:none;
}
.nav ul li a:hover {
background-color:#6E6E6E;
color:#fff;
}
}超级简单的 精简菜响应式单导航学习必备 通过这个可以自己改造成自己想要的任何响应式菜单 新手学习必备