title: Having trouble formatting the li and ul elements of a navigation in HTML and CSS
body: <p>I'm trying to format a navigation and its drop down in HTML and CSS.</p>
  
  <p><a href="https://jsfiddle.net/v29Laojv/" rel="nofollow">DEMO</a></p>
  
  <p>I have two problems.</p>
  
  <p>First, on the right of the navigation there is space. But it should go all to the right like on the left side.</p>
  
  <p>Second, I can't get the drop down items to fit below each other.
  Could u tell me where the problems of the right space and the drop down items are?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Navi*/
   nav ul {
      margin-top: 0;
      background-color: #FFF;
      list-style: none;
      padding: 0;
      margin-left:0;
  }
  nav ul li {
      display: block;
      float:left;
      background-color: #1C1C1C;
      width: 33%;
      text-align:center;
  }
  nav a {
      display: list-item;
      color: #FFF;
      font-size: 23px;
      line-height: auto;
      text-decoration: none;
      letter-spacing: 4px;
  }
  /* Dropdowns verstecken */
   nav ul ul {
      display: none;
      position:fixed;
  }
  /* DropDowns */
   nav ul ul li {
      width: auto;
      display: block;
      float:left;
      /*Üposition:relative;*/
      padding-left:0;
      margin-left:0;
  }
  /* DropDowns anzeigen */
   nav ul li:hover &gt; ul {
      display: inherit;
  }
  /* Highliting wenn angezeigt */
   nav a:hover {
      background-color: #000000;
      border-bottom: solid;
      border-bottom-color: #8E96C0;
  }
  #kopfzeile {
      position: fixed;
      width: 1000px;
      height: 60px;
      background-color: #fa8072;
      font-family: Quicksand;
      opacity: 0.95;
      margin:auto;
  }
  a {
      color: #FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="kopfzeile"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#anker_id_html"&gt;| HTML+ |&lt;/a&gt;
  
                      &lt;!-- Erstes Drop Down --&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Was ist HTML?&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Befehlsübersicht&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Beispiele&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#anker_id_css"&gt;| CSS+ |&lt;/a&gt;
  
                      &lt;!-- Zweites Drop Down --&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Was ist CSS?&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Befehlsübersicht&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Beispiele&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#PHP"&gt;| PHP+ |&lt;/a&gt;
  
                      &lt;!-- Drittes Drop Down --&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Was ist PHP&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Befehlsübersicht&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Beispiele&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Have a nice day,
  Olker</p>