title: Main navigation list display underneath eachother, trying to accomplish a horizontal one
body: <p>I'm trying to make a full css/html navigation bar, i conquered my last problem but ran into a new one.</p>
  
  <p>The main navigation li's now also display underneath eachother while im trying to make a horizontal navigation bar. </p>
  
  <p><a href="https://i.stack.imgur.com/XCbzA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XCbzA.png" alt="enter image description here"></a></p>
  
  <p>Also I think it doens't look smooth with the text all the way to the left, i'm pretty sure there must be some easy fix for that.</p>
  
  <pre><code>&lt;div class="navbar unselectable" unselectable=on&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="3d.html"&gt;Standard&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Standard&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellentesque mattis porta purus, at aliquet tortor rhoncus sed. Nullam nec lectus lacinia, convallis ex vel, lobortis erat. Cras mi quam, viverra a egestas vel, consequat sit amet felis. Proin rhoncus neque turpis, vel venenatis libero interdum ac.&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Standard&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum.&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Standard&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="3d.html"&gt;Standard&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thats the HTML, i don't think there is anything wrong here.</p>
  
  <pre><code>.navbar {
  width: 100%;
  height: 4.5em;
  font-weight: 300; 
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  margin-top: 1em;
  z-index: 1;
  }
  
  .navbar ul {
  position: relative;
  display: inline-block;
  list-style: none;
  left: 30px;
  top: 15px;
  font-size: 210%;
  }
  
  .navbar ul:after {
  content: "";
  clear: both;
  display: block;
  }
  
  .navbar ul li {
  display: block;
  }
  
  .navbar ul ul {
  position: relative;
  left: 0;
  top: 16.5px;
  width: 100%;
  display: none;
  font-size: 80%;
  }
  
  .navbar ul li:hover ul  {
  display: block;
  }
  
  .navbar ul ul li {
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  letter-spacing: 1px;
  }
  
  .navbar ul ul li:hover {
  background-color: rgba(0,0,0,0.4)
  }
  
  .navbar ul li a {
  display: block;
  text-decoration: none;
  color: white;
  opacity: 0.8;
  }
  
  .navbar ul li a:hover {
  opacity: 1;
  }
  
  .navbar ul ul ul {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  left: 100%; 
  top: 0;
  color: white;
  min-width: 150%;
  font-size: 60%;
  letter-spacing: 1px;
  }
  
  .navbar ul ul ul li {
  display: none;
  }
  
  .navbar ul ul li:hover &gt; ul li {
  display: block;
  }
  </code></pre>
  
  <p>It's somewhere in here but i really don't know where or what to change to get my desired effect.</p>
  
  <p>Thank you in advance for the time you spent on helping me !</p>
  
  <p>My sincere greetings,</p>
  
  <p>Raymond the Hammer</p>