Having trouble making the submenu horizontal - html

Question

I am having problem with this responsive menu. I want the dropdown to be horizontal and not vertical the way it is right now
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

I am not sure i followed your question. you want the dropdown to be horizontal and not vertical the way it is right now? It is horizontal in both desktop and mobile versions!!.
So if you want it to be vertical aligned for small screens the just add
#media screen and (max-width: 768px) {
.nav > li {
float: none;
display:block;
}
}
This way your dropdown will be horizontal for desktops and Vertical for smaller screens
Here id the fiddle LINK