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:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>PAVILLONS DIREKT SB-Pavillons Miet-Mobilbanken Miet-SV-Pavillons Bankentechnik</title>
        <link rel="icon" type="image/png" href="images/favi-logo.png">
        <meta name="author" content="Pavillons Direkt">
        <meta name="publisher" content="Pavillons Direkt">
        <meta name="copyright" content="Pavillons Direkt 2015">
        <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">
        <meta name="description" content="Pavillons Direkt ist Ihr langj&auml;hriger Partner f&uuml;r SB-Pavillons, Miet-Mobilbanken, Miet-SB-Pavillons sowie Banken- und Sicherheitstechnik. Entwicklung, Fertigung, Verkauf, Vermietung und Service aus einer Hand.">
        <meta http-equiv="content-language" content="de-DE">
        <meta name="robots" content="all">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="imagetoolbar" content="no">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/default.css">
    </head>
    <body>
        <section id="mobile-menu">
            <ul>
                <li><a class="mobile-menu-button" href="#mobile-menu"><i class="fa fa-bars fa-2x"></i></a></li>
            </ul>
        </section>
        <header>
            <img id="logo-img" src="images/logo.png">
            <p>Hier kann noch ein Motto hin!</p>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="about.html">&Uuml;ber uns</a></li>
                <li>
                    <a href="#">Produkte
                    <ul class="product-selector">
                        <li class="product-selector">
                            SB-Pavillons
                            <ul class="product-selector">
                                <li class="product-selector">
                                    Outdoor-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Outdoor 4</a></li>
                                        <li class="product-selector"><a href="">Outdoor "New"</a></li>
                                    </ul class="product-selector">
                                </li>
                                <li class="product-selector">
                                    Basic-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Basic 4</a></li>
                                        <li class="product-selector"><a href="">Basic 6</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Business-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Business 8</a></li>
                                        <li class="product-selector"><a href="">Business 12</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Image-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Image 11</a></li>
                                        <li class="product-selector"><a href="">Image 16</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector"><a href="">Individuell</a></li>
                                <li class="product-selector"><a href="">Gebrauchte</a></li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Miet-Banken
                            <ul class="product-selector">
                                <li class="product-selector">
                                    MietMobilbanken
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Mobilbanke 12x3m</a></li>
                                        <li class="product-selector"><a href="">Mobilbank 5x3m</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    MietSBPavillons
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Miet-SB-Pavillon</a></li>
                                        <li class="product-selector"><a href="">MietSBContainer</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Sonstige
                            <ul class="product-selector">
                                <li class="product-selector"><a href="">Indoor-SB-L&ouml;sungen</a></li>
                                <li class="product-selector"><a href="">Sonstige 2</a></li>
                                <li class="product-selector"><a href="">Sonstige 3</a></li>
                                <li class="product-selector"><a href="">Sonstige 4</a></li>
                            </ul>
                        </li>
                    </ul>
                    </a>
                </li>
                <li><a href="partners.html">Partner</a></li>
                <li><a href="intranet.html">Intranet</a></li>
                <li><a href="contact.html">Kontakt</a></li>
                <li><a href="impressum.html">Impressum</a></li>
            </ul>
        </nav>
        <section id="main-site">
            <article>
                <h2>Herzlich Willkommen!</h2>
                <p>Willkommen auf unseren Seiten und vielen Dank f&uuml;r Ihr Interesse. Wir m&ouml;chten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere M&ouml;glichkeiten geben.</p>
                <p>Sie suchen eine Gesch&auml;ftsstelle zur Miete, die Sie w&auml;hrend des Umbaus Ihrer Filialen oder f&uuml;r Ihre Pr&auml;senz bei Veranstaltungen und Events nutzen k&ouml;nnen? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verf&uuml;gen Sie immer &uuml;ber die richtige L&ouml;sung.</p>
                <p>Oder planen Sie f&uuml;r Ihre Kunden eine SB-Gesch&auml;ftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die f&uuml;r Sie perfekte L&ouml;sung. Durch kurze Lieferzeiten und die M&ouml;glichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.</p>
                <p>Selbstverst&auml;ndlich bieten wir Ihnen auch s&auml;mtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen geh&ouml;ren ebenso dazu, wie die bauliche Anpassung bei &Auml;nderung der Anforderungen an Ihren SB-Pavillon.</p>
            </article>
            <aside>
                <section>
                    <h2>News</h2>
                </section>
            </aside>
        </section>
        <footer>
            <ul>
                <li><b>&copy; 2015, PAVILLONS DIREKT</b></li>
                <li><a href="contact.html"><i class="fa fa-phone"></i>&nbsp;&nbsp;Kontakt</a></li>
                <li><a href="impressum.html"><i class="fa fa-info"></i>&nbsp;&nbsp;Ipressum</a></li>
            </ul>
        </footer>
    </body>
</html>

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 :)

I don't understand your question. Could you please be more specific as to what you want and what the problem is. — mattdevio, Dec 10 '15 at 17:24
@magreenberg Read the top line now, do you understand the problem? — Adam Buchanan Smith, Dec 10 '15 at 17:28
[Validate](https://html5.validator.nu/) your HTML before asking. — Sebastian Simon, Dec 10 '15 at 17:39

score 2 · Answer 1 · edited May 23 '17 at 12:15

Your play is on the wrong property. What you want to do is hide child lists. The correct way of doing this is to toggle the display: none to display: block or display: inline-block properties. What you are intending to do is toggle visibility: hidden to visibility: visible properties. That is, the crux of your issue.

You need to understand the difference between display: none and visibility: visible. There's already a question on that here -> What is the difference between visibility:hidden and display:none?

Just to borrow from Kevin's answer there (which is the marked answer and rightly so) :

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

See below how the change from visibility: hidden to display: none affects the appearance (you will need to implement this on all children lists as well) :

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 {
    display: none;
}

<section id="mobile-menu">
            <ul>
                <li><a class="mobile-menu-button" href="#mobile-menu"><i class="fa fa-bars fa-2x"></i></a></li>
            </ul>
        </section>
        <header>
            <img id="logo-img" src="images/logo.png">
            <p>Hier kann noch ein Motto hin!</p>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="about.html">&Uuml;ber uns</a></li>
                <li>
                    <a href="#">Produkte
                    <ul class="product-selector">
                        <li class="product-selector">
                            SB-Pavillons
                            <ul class="product-selector">
                                <li class="product-selector">
                                    Outdoor-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Outdoor 4</a></li>
                                        <li class="product-selector"><a href="">Outdoor "New"</a></li>
                                    </ul class="product-selector">
                                </li>
                                <li class="product-selector">
                                    Basic-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Basic 4</a></li>
                                        <li class="product-selector"><a href="">Basic 6</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Business-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Business 8</a></li>
                                        <li class="product-selector"><a href="">Business 12</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Image-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Image 11</a></li>
                                        <li class="product-selector"><a href="">Image 16</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector"><a href="">Individuell</a></li>
                                <li class="product-selector"><a href="">Gebrauchte</a></li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Miet-Banken
                            <ul class="product-selector">
                                <li class="product-selector">
                                    MietMobilbanken
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Mobilbanke 12x3m</a></li>
                                        <li class="product-selector"><a href="">Mobilbank 5x3m</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    MietSBPavillons
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Miet-SB-Pavillon</a></li>
                                        <li class="product-selector"><a href="">MietSBContainer</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Sonstige
                            <ul class="product-selector">
                                <li class="product-selector"><a href="">Indoor-SB-L&ouml;sungen</a></li>
                                <li class="product-selector"><a href="">Sonstige 2</a></li>
                                <li class="product-selector"><a href="">Sonstige 3</a></li>
                                <li class="product-selector"><a href="">Sonstige 4</a></li>
                            </ul>
                        </li>
                    </ul>
                    </a>
                </li>
                <li><a href="partners.html">Partner</a></li>
                <li><a href="intranet.html">Intranet</a></li>
                <li><a href="contact.html">Kontakt</a></li>
                <li><a href="impressum.html">Impressum</a></li>
            </ul>
        </nav>
        <section id="main-site">
            <article>
                <h2>Herzlich Willkommen!</h2>
                <p>Willkommen auf unseren Seiten und vielen Dank f&uuml;r Ihr Interesse. Wir m&ouml;chten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere M&ouml;glichkeiten geben.</p>
                <p>Sie suchen eine Gesch&auml;ftsstelle zur Miete, die Sie w&auml;hrend des Umbaus Ihrer Filialen oder f&uuml;r Ihre Pr&auml;senz bei Veranstaltungen und Events nutzen k&ouml;nnen? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verf&uuml;gen Sie immer &uuml;ber die richtige L&ouml;sung.</p>
                <p>Oder planen Sie f&uuml;r Ihre Kunden eine SB-Gesch&auml;ftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die f&uuml;r Sie perfekte L&ouml;sung. Durch kurze Lieferzeiten und die M&ouml;glichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.</p>
                <p>Selbstverst&auml;ndlich bieten wir Ihnen auch s&auml;mtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen geh&ouml;ren ebenso dazu, wie die bauliche Anpassung bei &Auml;nderung der Anforderungen an Ihren SB-Pavillon.</p>
            </article>
            <aside>
                <section>
                    <h2>News</h2>
                </section>
            </aside>
        </section>
        <footer>
            <ul>
                <li><b>&copy; 2015, PAVILLONS DIREKT</b></li>
                <li><a href="contact.html"><i class="fa fa-phone"></i>&nbsp;&nbsp;Kontakt</a></li>
                <li><a href="impressum.html"><i class="fa fa-info"></i>&nbsp;&nbsp;Ipressum</a></li>
            </ul>
        </footer>

@AdamBuchananSmith +1 And I didn't pay much attention to the html. I instead looked at the CSS. I think we may have hit just the tip of the iceberg though!!! — Satwik Nadkarny, Dec 10 '15 at 17:38

score 1 · Accepted Answer · answered Dec 10 '15 at 17:25

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

<nav class="navigation">
  <ul>
    <li><a href="index.html" class="current">Home</a></li>
    <li><a href="about.html">&Uuml;ber uns</a></li>
    <li>
    <a href="#">Produkte</a></li>
    <li class="product-selector">Sonstige</li>
    <li><a href="partners.html">Partner</a></li>
    <li><a href="intranet.html">Intranet</a></li>
    <li><a href="contact.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
  </ul>
</nav>

I honestly couldn't see the li or ul that was the issue and is why I shortened the code, just make sure when you put it back, you close the ul and il tags in the correct places, also don't add a class names to a closing tags, and do not nest tags inside each other. — Adam Buchanan Smith, Dec 10 '15 at 17:38

Why is my unordered list changing the line?

2 Answers2