What is preventing the navigation bar from showing up and how to fix it?

Question

On my website which is done, the navigation bar is not working, although I have been trying with every technique that I know to figure out why. I have used z-index , but it didn't work either.

 /*Header*/ header{ background:#35424a; color: #ffffff; padding-top: 10px; min-height: 70px; border-bottom: #e8491d 3px solid; } header a{ color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; } header li{ float: right; display: inline; padding: 0 20px 0 20px; } header #branding{ float: left; } header #branding h1{ margin-left: 10px; } header nav{ float: right; margin-top: 10px; } header ul{ float: right; } header ul li{ float: right; list-style: none; position: relative; } header ul li a{ display: block; font-family: arial; font-size: 14px; padding:22px 14px; text-decoration:none; } header ul li ul{ display: none; position: absolute; background-color: #e8491d; padding:10px; border-radius: 0px 0px 4px 4px; } header ul li:hover ul{ display: inline-block; z-index: -1; } header ul li ul li{ width: 180px; border-radius: 4px; } header ul li ul li a:hover { background-color: #f3f3f3; } header ul li ul li a{ padding: 8px 14px; } header .highlight, header .current a{ color: #e8491d; font-weight:bold; } header a:hover{ color: #cccccc; font-weight:bold; } /*Showcase*/ #showcase{ min-height: 400px; background:url("https://www.mexticket.com/wp-content/uploads/2016/10/telon.jpg")no-repeat 0 -400px; background-position: 50% 100%; text-align: center; color: white; } #showcase h1{ margin-top: 100px; font-size: 55px; margin-bottom: 10px; } #showcase p{ font-size: 20px; } /*Boxes*/ #boxes{ margin-top: 20px; background-color: #808080; } #boxes .box{ float: left; text-align: center; width: 23%; padding: 10px; } #boxes .box img{ width: 200px; height: 125px; } /*Boxes01*/ #boxes01{ margin-top: 20px; background-color: #808080; } #boxes01 .box{ float: left; text-align: center; width: 23%; padding: 10px; } #boxes01 .box img{ width: 130px; } .box img { border-radius: 4px; } /*Information*/ .template{ background-color: #fff; color: black; font-family: "Arial", "Helvetica"; font-size: 12px; } .information{ margin: 0%; padding: 0%; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ES Torsberg</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="js/scripts.js"></script> </head> <body> <header> <div class="container"> <div id="branding"> <h1><span class="highlight">ES</span>TORSBERG</h1> </div> <nav> <ul> <li class="current"><a href="index.html">Hemma</a></li> <li><a href="kontakt.html">Kontakt</a></li> <li><a href="schema.html">Schema</a></li> <li><a href="omOss.html">Om Oss</a></li> <li> <a>Inriktningar <ul> <li><a href="teater.html">Teater</a></li> <li><a href="musik.html">Musik</a></li> <li><a href="dans.html">Dans</a></li> <li><a href="ljudteknik.html">Ljudteknik</a></li></a> </ul> </li> </ul> </nav> </div> </header> <section id="showcase"> <div class="container"> <h1>ESTETISKA PROGRAMMET TORSBERGSGYMNASIET</h1> </div> </section> <section id="boxes"> <div class="container"> <div class="box"> <h3>TEATER</h3><a href="teater.html"><img src="IMAGES/Hemsida 6.jpg"></a> </div> <div class="box"> <h3>MUSIK</h3><a href="musik.html"><img src="IMAGES/Hemsida 18.jpg"></a> </div> <div class="box"> <h3>DANS</h3><a href="dans.html"><img src="IMAGES/Hemsida 10.jpg"></a> </div> <div class="box"> <h3>LJUDTEKNIK</h3><a href="ljudteknik.html"><img src="https://cdn.pixabay.com/photo/2016/11/19/13/01/audio-1839162_960_720.jpg"></a> </div> </div> </section> <section id="boxes01"> <div class="container"> <div class="box"> <h3>INTERVJU MED MAX</h3><a href="intervju-med-max.html"><img src="IMAGES/Max.jpg"></a> </div> <div class="box"> <h3>INTERVJU MED ANJA</h3><a href="intervju-med-anja.html"><img src="IMAGES/anja.jpg"></a> </div> <div class="box"> <h3>INTERVJU MED MIKAELA</h3><a href="intervju-med-mikaela.html"><img src="IMAGES/Max.jpg"></a> </div> <div class="box"> <h3>INTERVJU MED LENA</h3><a href="intervju-med-lena.html"><img src="IMAGES/anja.jpg"></a> </div> </div> </section> <section class="template"> <table class="information"> <tbody> <td> <h1 class="information1">Telefonnummer: 010-454 10 00 <br>Skolwebbsidan: torsbergsgymnasiet.se<br>Skoladress: Läroverksgatan 36, 821 33 Bollnäs</h1> </td> </tbody> </table> </section> <footer> <p>ES TORSBERGSGYMNASIET | Design by Tilemachos Marmaras | Copyright &copy; 2019</p> </footer> </body> </html>

Answer 1

Your HTML code is not well structured, <a> is closed before <ul> , try to update it like :

  <li>
    <a>Inriktningar</a>
    <ul>
      <li><a href="teater.html">Teater</a></li>
      <li><a href="musik.html">Musik</a></li>
      <li><a href="dans.html">Dans</a></li>
      <li><a href="ljudteknik.html">Ljudteknik</a></li>
    </ul>
  </li>

to show the nav up, use z-index:10; like :

header ul li{
    float: right;
    list-style: none;
    position: relative;
    z-index:10;
}

try this fiddle : https://jsfiddle.net/6rg3tqyu/

Answer 2

You are almost done, just remove or update the z-index property from ul in css line no. 61.

header ul li:hover ul{
display: inline-block;
z-index: 1;

}

Answer 3

header a{
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

This is overriding the color of your a links to white, so you are not able to see them.

What is preventing the navigation bar from showing up and how to fix it?

Question

3 answers

solution1
1 ACCPTED 2019-02-14 09:42:55

solution2
0 2019-02-14 09:19:02

solution3
0 2019-02-14 09:20:34

What is preventing the navigation bar from showing up and how to fix it?

Question

3 answers

solution1 1 ACCPTED 2019-02-14 09:42:55

solution2 0 2019-02-14 09:19:02

solution3 0 2019-02-14 09:20:34

solution1
1 ACCPTED 2019-02-14 09:42:55

solution2
0 2019-02-14 09:19:02

solution3
0 2019-02-14 09:20:34