如何在汉堡图标下方显示菜单列表?
CSS:
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
.container {
width: auto;
}
}
JSFiddle:https://jsfiddle.net/xkp0p7vc/
提前致谢。
最佳答案
只需将display: block; clear: both;
添加到ul.topnav.responsive li
并将float: right;
从.topnav-right
删除。
ul.topnav.responsive li {
float: none;
display: block; /*change with inline*/
clear: both;
}
.topnav-right {
/* float: right; */
}
Demo