CSS06-响应式导航栏实验
2021-05-01 05:26
阅读：667
YPE html>
标签：使用 解决 min osi scree rop 告诉 :hover gre
把菜鸟里响应式导航栏和下拉菜单的示例加在了一起，但是没有出现预期的效果，出现的问题有两个：1.设置两个媒体查询时，只有一个生效，和代码顺序无关，而且单个测试时都能生效。2.水平导航栏添加的下拉菜单会出现溢出，如果将overflow设置为hidden下拉菜单不会显示。代码如下：
Nav02.html:
响应式边栏导航+下拉菜单
响应式边栏导航
当窗口小于700px,变为水平导航栏; 当窗口大于700px,变为左侧固定导航栏。
当窗口小于600px,变为左侧固定导航栏; 当窗口大于600px,变为水平导航栏。
问题1.可以实现在700px的转变，但窗口大小小于600时没有转为垂直导航栏。
单个测试时都可以实现；与顺序无关；
与使用class或id无关；
问题2.水平导航栏的下拉菜单会出现溢出的现象，如果overflow设置为hidden，菜单不会出现。
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-响应式导航栏实验
标签：使用 解决 min osi scree rop 告诉 :hover gre
原文地址：https://www.cnblogs.com/C-bj/p/12148241.html
评论
亲，登录后才可以留言！