但是没有出现预期的效果
把菜鸟里响应式导航栏和下拉菜单的示例加在了一起，但是没有呈现预期的效果，呈现的问题有两个：1.设置两个媒体盘问时，只有一个生效，和代码挨次无关，而且单个测试时都能生效。2.程度导航栏添加的下拉菜单会呈现溢出，如果将overflow设置为hidden下拉菜单不会显示。代码如下：
Nav02.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式边栏导航+下拉菜单</title> <link type="text/css" href="http://www.mamicode.com/Nav02.css"> </head> <body> <ul> <li><a href="#">主页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">联系</a></li> <li> <a href="#">关于</a> <div> <a href="#">关于我们</a> <a href="#">赞助商</a> <a href="#">指导</a> </div> </li> </ul> <div> <h4>响应式边栏导航</h4> <p> 当窗口小于700px,变为程度导航栏; 当窗口大于700px,变为左侧固定导航栏。 </p> <p> 当窗口小于600px,变为左侧固定导航栏; 当窗口大于600px,变为程度导航栏。 </p> <h4>问题1.可以实此刻700px的改变，但窗口巨细小于600时没有转为垂直导航栏。</h4> 单个测试时都可以实现； <br>与挨次无关； <br>与使用class或id无关； <h4>问题2.程度导航栏的下拉菜单会呈现溢出的现象，如果overflow设置为hidden，菜单不会呈现。</h4> </div> </body> </html>
Nav02.css:
body{ margin: 0; } #Nav{ list-style-type: none; margin: 0; padding: 0; width: 20%; background-color: #555555; position: fixed; height: 100%; overflow: auto; } #Nav li>a{ display: block; text-decoration: none; color: white; padding: 14px 16px; } #Nav li>a:hover:not(.active){ color: #555555; background-color: #f1f1f1; } #Nav li>a.active{ background-color: lightgrey; } div.content{ margin-left: 20%; padding: 1px 16px; height: 1000px; } .DC{ display: none; position: absolute; background-color: #f1f1f1; //min-width: 160px; box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2); } .DC a{ color: darkgray; padding: 10px 14px; text-decoration: none; text-align: center; display: block; } .DC a:hover{ color: white; background-color: darkgray; } .dropdown:hover .DC{ display: block; } @media screen and (max-width: 700px){ #Nav{ list-style-type: none; margin: 0; padding: 0; background-color: #555555; width: 100%; height: auto; position: relative; overflow: hidden; } #Nav li{ float: left; } div.content{ margin-left: 0; } } @media screen and (max-width: 600px){ #Nav a{ text-align: center; float: none; } }
如有大佬路过，，能报告我怎么解决就好了（想屁吃）。
CSS06-响应式导航栏尝试
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32319.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")