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; } }
超级简单的 精简菜响应式单导航学习必备 通过这个可以自己改造成自己想要的任何响应式菜单 新手学习必备