難以製作子菜單水平

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

這樣你的下拉菜單會是水平的臺式機和立式的小屏幕

這裏ID小提琴LINK