Question

我对此响应式菜单有疑问。我希望下拉列表是水平的，而不是现在的垂直方式

 .nav {
list-style: none;
*zoom: 1;
text-align:center;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
position:relative;
text-align:center;}
.nav a {
padding: 10px 15px;
color:#000;
font:16px/24px'Oswald', sans-serif;
font-weight:300
}
.nav li {
position: relative;
}
.nav > li {
display:inline-block;
}
.nav li a:hover {
color:#f15d22
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
@media screen and (max-width: 768px) {
.active {
    display: block;
}
.nav > li {
    float: none;
}
.nav > li > .parent {
    background-position: 95% 50%;
}
.nav li li .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
.nav ul {
    display: block;
    width: 100%;
}
.nav > li.hover > ul, .nav li li.hover ul {
    position: static;
}
}

Answer 1

我不确定我是否按照你的提问。你希望下拉列表是水平的而不是垂直的吗？它在桌面和移动版本中都是水平的!!。

因此，如果您希望它为小屏幕垂直对齐，只需添加

即可

@media screen and (max-width: 768px) {
.nav > li {
        float: none;
         display:block;
    }
}

这样，您的下拉菜单对于桌面是水平的，对于较小的屏幕是垂直的

这里是小提琴LINK

无法使子菜单水平

1 个答案: