Why is my unordered list changing the line?

Question

Nav links in nav bar are dropping down outside of the nav bar, how do I keep the nav links inside the nav bar?

At the moment it looks like this, but i want to have it displayed inline:

Take a look at this, shows what i currently have

My HTML code looks like this:



    
        PAVILLONS DIREKT SB-Pavillons Miet-Mobilbanken Miet-SV-Pavillons Bankentechnik
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
        
            
                
            
        
        
            
            Hier kann noch ein Motto hin!
        
        
            
                Home
                Über uns
                
                    Produkte
                    
                        
                            SB-Pavillons
                            
                                
                                    Outdoor-Line
                                    
                                        Outdoor 4
                                        Outdoor "New"
                                    
                                
                                
                                    Basic-Line
                                    
                                        Basic 4
                                        Basic 6
                                    
                                
                                
                                    Business-Line
                                    
                                        Business 8
                                        Business 12
                                    
                                
                                
                                    Image-Line
                                    
                                        Image 11
                                        Image 16
                                    
                                
                                Individuell
                                Gebrauchte
                            
                        
                        
                            Miet-Banken
                            
                                
                                    MietMobilbanken
                                    
                                        Mobilbanke 12x3m
                                        Mobilbank 5x3m
                                    
                                
                                
                                    MietSBPavillons
                                    
                                        Miet-SB-Pavillon
                                        MietSBContainer
                                    
                                
                            
                        
                        
                            Sonstige
                            
                                Indoor-SB-Lösungen
                                Sonstige 2
                                Sonstige 3
                                Sonstige 4
                            
                        
                    
                    
                
                Partner
                Intranet
                Kontakt
                Impressum
            
        
        
            
                Herzlich Willkommen!
                Willkommen auf unseren Seiten und vielen Dank für Ihr Interesse. Wir möchten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere Möglichkeiten geben.
                Sie suchen eine Geschäftsstelle zur Miete, die Sie während des Umbaus Ihrer Filialen oder für Ihre Präsenz bei Veranstaltungen und Events nutzen können? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verfügen Sie immer über die richtige Lösung.
                Oder planen Sie für Ihre Kunden eine SB-Geschäftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die für Sie perfekte Lösung. Durch kurze Lieferzeiten und die Möglichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.
                Selbstverständlich bieten wir Ihnen auch sämtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen gehören ebenso dazu, wie die bauliche Anpassung bei Änderung der Anforderungen an Ihren SB-Pavillon.
            
            
                
                    News
                
            
        
        
            
                © 2015, PAVILLONS DIREKT
                  Kontakt
                  Ipressum

and my CSS looks like this:

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;
}

Thanks for any help :)

Adam Buchanan Smith · Accepted Answer

You have invalid tag placement all over the place. Take this fiddle and fill in the blanks. http://jsfiddle.net/c9dhn9nc/34/


  
    Home
    Über uns
    
    Produkte
    Sonstige
    Partner
    Intranet
    Kontakt
    Impressum

Why is my unordered list changing the line?

Answers (2)

Related Questions