CSS navigation bar (linking)-CodePudding

Iam trying to find out how I can make this navigation bar (the navigation bar is linking to a website). That is it now: my Website

That has it to be (the format): template navigation bar

This is my HTML : HTML

and this is my CSS : CSS

I hope someone can help me that were really nice. Iam a beginner in HTML and CSS. If you have found any mistakes that I mad pls answer me!

Thank you

CodePudding user response：

Change the padding of li from zero to five (or any other number)

body, html {
 height: 100%;
}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
}
li{
 float: left;
 padding: 5px;
}
#anzeige {

display: block;
 color: white;
 text-align: center;
 padding: 15px;
 text-decoration: none;
 font-size: 20px;
}
li a:hover {
 background-color: #111;

}

    <! doctype html>
    <html>
    <head>
      <link rel="stylesheet" href="style.css">
      <meta charset="utf-8"/>
      <title> Reiseziele </title>
    </head>
    <body>
        <div id="nav">
          <ul>
          <div id="anzeige">
            <li><a href="html/Kontinent/index.html"></a> Kontinent</li>
            <li><a href="html/Stadt/Index.html"></a>Städte</li>
            <li><a href="html/Abenteuer/Index.html"></a>Abenteuerreisen</li>
            <li><a hre="html/Sehenswuerdigkeiten/Index.html">         </a>Sehenswürdigkeiten aller Welt</li>
          </div>
          </ul>
        </div>
      <h1>Sie sind sich nicht sicher welches Hotel am besten für Ihre Vorstellungen sind?</h1>

(Next time, please paste your code instead of linking an image)