html - 无法使子菜单水平

Question

我在使用此响应式菜单时遇到问题。我希望下拉菜单是水平的，而不是像现在这样垂直的

This is my fiddle

 .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;
    }
}

这样你的下拉菜单在桌面上是水平的，在小屏幕上是垂直的

这里是 fiddle LINK