title: Putting two <ul>'s next to each other
body: <p>I'm having some trouble with putting two <code>ul</code>'s next to each other.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.container &gt; nav &gt; ul &gt; li &gt; div {
    width: 100%;
    margin-top: 13px;
    padding: 25px;
    position: absolute;
    border-bottom: 1px #222222 solid;
    background-color: #ffffff;
  }
  div.container &gt; nav &gt; ul &gt; li &gt; div &gt; ul {
    width: 200px;
    border-left: 2px #555555 solid;
  }
  div.container &gt; nav &gt; ul &gt; li &gt; div &gt; ul &gt; li {
    padding: 3px;
  }
  div.container &gt; nav &gt; ul &gt; li &gt; div &gt; h4 {
    width: 242px;
    color: #d60000;
  }
  div.container &gt; nav &gt; ul &gt; li &gt; div &gt; ul &gt; li &gt; a {
    text-decoration: none;
    color: #222222;
    font-size: 12px;
  }
  div.container &gt; nav &gt; ul &gt; li &gt; div &gt; ul &gt; li &gt; a:hover {
    color: #d60000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h4&gt;Website&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Basic&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Premium&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Without Hosting&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Without Database&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Multiple Website's&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;h4&gt;Hosting&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Hosting&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Host a personal site&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=''&gt;Host an existing website&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem that I'm getting now is that the <code>&lt;ul&gt;</code>'s drop down under each other, where I like them to be <code>inline</code>.</p>
  
  <p>Has anyone a proper solution for the problem. I searched through other's questions about this topic, all methods did not work.</p>