title: Why is my unordered list changing the line?
body: <p>Nav links in nav bar are dropping down outside of the nav bar, how do I keep the nav links inside the nav bar?</p>
  
  <p>At the moment it looks like this, but i want to have it displayed inline:</p>
  
  <p><a href="http://i.stack.imgur.com/iBpUb.png" rel="nofollow">Take a look at this, shows what i currently have</a></p>
  
  <p>My HTML code looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
      &lt;head&gt;
          &lt;title&gt;PAVILLONS DIREKT SB-Pavillons Miet-Mobilbanken Miet-SV-Pavillons Bankentechnik&lt;/title&gt;
          &lt;link rel="icon" type="image/png" href="images/favi-logo.png"&gt;
          &lt;meta name="author" content="Pavillons Direkt"&gt;
          &lt;meta name="publisher" content="Pavillons Direkt"&gt;
          &lt;meta name="copyright" content="Pavillons Direkt 2015"&gt;
          &lt;meta name="keywords" content="SB-Pavillon,Pavillons,Miet-Mobilbanke,Mobilbanken,Mobilbank,Miet-Mobilbanken,Miet-SB-Pavillon,Miet-SB-Pavillon,Miet-SB-Pavillons, bankcontainer, pod, pods, cash-point, cash-points, city-cash-point,citycashpoint,bank-container,miet-bank,Ritzenthaler,Pavillons Direkt,ash banksystem,nautech,inform,synfis,kompaktbau writz,gunnebo,garny,safecor,leicher,gaalego,wincor nixdorf,ncr,diebold,geldautomat,geldautomaten,telefonzelle,heventa"&gt;
          &lt;meta name="description" content="Pavillons Direkt ist Ihr langj&amp;auml;hriger Partner f&amp;uuml;r SB-Pavillons, Miet-Mobilbanken, Miet-SB-Pavillons sowie Banken- und Sicherheitstechnik. Entwicklung, Fertigung, Verkauf, Vermietung und Service aus einer Hand."&gt;
          &lt;meta http-equiv="content-language" content="de-DE"&gt;
          &lt;meta name="robots" content="all"&gt;
          &lt;meta http-equiv="pragma" content="no-cache"&gt;
          &lt;meta http-equiv="imagetoolbar" content="no"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/default.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;section id="mobile-menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a class="mobile-menu-button" href="#mobile-menu"&gt;&lt;i class="fa fa-bars fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
          &lt;header&gt;
              &lt;img id="logo-img" src="images/logo.png"&gt;
              &lt;p&gt;Hier kann noch ein Motto hin!&lt;/p&gt;
          &lt;/header&gt;
          &lt;nav class="navigation"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html" class="current"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;&amp;Uuml;ber uns&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Produkte
                      &lt;ul class="product-selector"&gt;
                          &lt;li class="product-selector"&gt;
                              SB-Pavillons
                              &lt;ul class="product-selector"&gt;
                                  &lt;li class="product-selector"&gt;
                                      Outdoor-Line
                                      &lt;ul class="product-selector"&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Outdoor 4&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Outdoor "New"&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul class="product-selector"&gt;
                                  &lt;/li&gt;
                                  &lt;li class="product-selector"&gt;
                                      Basic-Line
                                      &lt;ul class="product-selector"&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Basic 4&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Basic 6&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="product-selector"&gt;
                                      Business-Line
                                      &lt;ul class="product-selector"&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Business 8&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Business 12&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="product-selector"&gt;
                                      Image-Line
                                      &lt;ul class="product-selector"&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Image 11&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Image 16&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="product-selector"&gt;&lt;a href=""&gt;Individuell&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="product-selector"&gt;&lt;a href=""&gt;Gebrauchte&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="product-selector"&gt;
                              Miet-Banken
                              &lt;ul class="product-selector"&gt;
                                  &lt;li class="product-selector"&gt;
                                      MietMobilbanken
                                      &lt;ul class="product-selector"&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Mobilbanke 12x3m&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Mobilbank 5x3m&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="product-selector"&gt;
                                      MietSBPavillons
                                      &lt;ul class="product-selector"&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;Miet-SB-Pavillon&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="product-selector"&gt;&lt;a href=""&gt;MietSBContainer&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="product-selector"&gt;
                              Sonstige
                              &lt;ul class="product-selector"&gt;
                                  &lt;li class="product-selector"&gt;&lt;a href=""&gt;Indoor-SB-L&amp;ouml;sungen&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="product-selector"&gt;&lt;a href=""&gt;Sonstige 2&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="product-selector"&gt;&lt;a href=""&gt;Sonstige 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="product-selector"&gt;&lt;a href=""&gt;Sonstige 4&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="partners.html"&gt;Partner&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="intranet.html"&gt;Intranet&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="impressum.html"&gt;Impressum&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;section id="main-site"&gt;
              &lt;article&gt;
                  &lt;h2&gt;Herzlich Willkommen!&lt;/h2&gt;
                  &lt;p&gt;Willkommen auf unseren Seiten und vielen Dank f&amp;uuml;r Ihr Interesse. Wir m&amp;ouml;chten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere M&amp;ouml;glichkeiten geben.&lt;/p&gt;
                  &lt;p&gt;Sie suchen eine Gesch&amp;auml;ftsstelle zur Miete, die Sie w&amp;auml;hrend des Umbaus Ihrer Filialen oder f&amp;uuml;r Ihre Pr&amp;auml;senz bei Veranstaltungen und Events nutzen k&amp;ouml;nnen? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verf&amp;uuml;gen Sie immer &amp;uuml;ber die richtige L&amp;ouml;sung.&lt;/p&gt;
                  &lt;p&gt;Oder planen Sie f&amp;uuml;r Ihre Kunden eine SB-Gesch&amp;auml;ftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die f&amp;uuml;r Sie perfekte L&amp;ouml;sung. Durch kurze Lieferzeiten und die M&amp;ouml;glichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.&lt;/p&gt;
                  &lt;p&gt;Selbstverst&amp;auml;ndlich bieten wir Ihnen auch s&amp;auml;mtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen geh&amp;ouml;ren ebenso dazu, wie die bauliche Anpassung bei &amp;Auml;nderung der Anforderungen an Ihren SB-Pavillon.&lt;/p&gt;
              &lt;/article&gt;
              &lt;aside&gt;
                  &lt;section&gt;
                      &lt;h2&gt;News&lt;/h2&gt;
                  &lt;/section&gt;
              &lt;/aside&gt;
          &lt;/section&gt;
          &lt;footer&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;b&gt;&amp;copy; 2015, PAVILLONS DIREKT&lt;/b&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Kontakt&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="impressum.html"&gt;&lt;i class="fa fa-info"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Ipressum&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my CSS looks like this:</p>
  
  <pre><code>body {
      color: #333;
      background-color: #ffffff;
      font-size: 100%;
      margin: 0em;
      padding: 0em;
  }
  
  ul {
      margin: 0px;
      padding: 0px;
  }
  
  li {
      list-style: none;
      line-height: 1.25em;
      font-family: Helvetica;
      font-weight: 100;
      margin: .313em .0em .0313em .0em;
      padding: 1.25em;
  }
  
  h1 {
      font-size: 2.5em;
      line-height: 3.8em;
      font-family: Helvetica;
      font-weight: 100;
      margin: 0em;
  }
  
  h2 {
      font-size: 1.563em;
      line-height: 1.8em;
      font-family: Helvetica;
      font-weight: 100;
      margin: 0em;
      padding: 1.25em;
      text-align: left
  }
  
  p {
      line-height: 1.25em;
      font-family: Helvetica;
      font-weight: 100;
      margin: 0em;
      padding: 1.25em;
      text-align: justify;
  }
  
  img {
      width: 90%;
      height: auto;
      max-width: 100%;
  }
  
  /* Mobile-Menu */
  
  #mobile-menu {
      display: block;
      background-color: #ffffff;
  }
  
  #mobile-menu ul {
      display: block;
      width: 2em;
      padding: .9em;
  }
  
  #mobile-menu ul {
      display: inline;
  }
  
  #mobile-menu ul li {
      display: inline;
  }
  
  #mobile-menu ul li a {
      text-decoration: none;
  }
  
  /* Head */
  
  header {
      display: block;
      background: #ffffff;
      text-align: center;
  }
  
  #logo-img {
      width: 20%;
  }
  
  /* Main Nav */
  
  nav {
      display: block;
      height: 2.5em;
      background: #333;
      color: red;
      text-align: center;
  }
  
  nav ul {
      display: block;
  }
  
  nav ul li {
      display: inline;
      margin: .0em .188em .0em .188em;
  }
  
  nav ul li ul {
      display: inline;
      margin: .0em .188em .0em .188em;
  }
  
  nav ul li ul li {
      display: inline;
      margin: .0em .188em .0em .188em;
  }
  
  nav ul li ul li a {
      font-size: 1.125em;
      line-height: 2.5em;
      padding: .0563em .0938em .375em .0938em;
      transition:background 0.2s;
      -webkit-transition:background 0.2s;
      color: red;
  }
  
  nav ul li ul li ul {
      display: inline;
      margin: .0em .188em .0em .188em;
  }
  
  nav ul li ul li ul li {
      display: inline;
      margin: .0em .188em .0em .188em;
  }
  
  nav ul li ul li ul li a {
      font-size: 1.125em;
      line-height: 2.5em;
      padding: .0563em .0938em .375em .0938em;
      transition:background 0.2s;
      -webkit-transition:background 0.2s;
      color: red;
  }
  
  nav ul li a {
      font-size: 1.125em;
      line-height: 2.5em;
      padding: .0563em .0938em .375em .0938em;
      transition:background 0.2s;
      -webkit-transition:background 0.2s;
      color: red;
  }
  
  nav ul li a:hover {
      background: #8C8888;
      border-bottom: 0.188em solid #5298F2;
      text-decoration: none;
  }
  
  nav ul li a:link {
      text-decoration: none;
  }
  
  nav ul li a:visited {
      text-decoration: none;
  }
  
  nav ul li a:active {
      text-decoration: none;
  }
  
  nav ul li a:focus {
      text-decoration: none;
  }
  
  nav ul li a.current {
      border-bottom: 0.188em solid #5298F2;
  }
  
  .product-selector {
      visibility: hidden;
  }
  </code></pre>
  
  <p>Thanks for any help :)</p>