title: Having trouble making the submenu horizontal
body: <p>I am having problem with this responsive menu. I want the dropdown to be horizontal and not vertical the way it is right now</p>
  
  <p><a href="http://jsfiddle.net/2zxAA/" rel="nofollow"><strong>This is my fiddle</strong></a></p>
  
  <pre><code> .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 &gt; li {
  display:inline-block;
  }
  .nav li a:hover {
  color:#f15d22
  }
  .nav &gt; li &gt; .parent {
  background-image: url("images/downArrow.png");
  background-repeat: no-repeat;
  background-position: right;
  }
  .nav &gt; li &gt; a {
  display: block;
  }
  .nav li ul {
  position: absolute;
  left: -9999px;
  }
  .nav &gt; li.hover &gt; 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 &gt; li {
      float: none;
  }
  .nav &gt; li &gt; .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 &gt; li.hover &gt; ul, .nav li li.hover ul {
      position: static;
  }
  }
  </code></pre>