title: creating a searchbox in the navigation bar
body: <p>Firstly is it bad to create a navigation bar in HTML with unordered list?
  Second it looks bad in the site I want it to be positioned in the right corner and I want to link it with a map but I don't know how that works since this is the first time I'm coding in HTML, so can anyone show me how's that done.</p>
  
  <p><strong>HTML:</strong></p>
  
  <p>
    </p>
  
  <pre><code>&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;
    &lt;form&gt;
      &lt;input type="text" placeholder="Search Location" required=""&gt;
      &lt;input type="button" name="Search" value="Search"&gt;
    &lt;/form&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>nav {
    margin: 0 0 0 0;
    font-family: Arial;
    font-size: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
    text-align: center;
    vertical-align: top;
    margin-top: 130px;
  }
  
  * {
    margin: 0;
    padding: 0;
    line-height: 1;
    position: sticky;
    top: -130px;
  }
  
  #nav li {
    float: left;
  }
  
  #nav a {
    display: block;
    color: white;
    text-align: center;
    width: 200px;
    padding: 10px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: black;
  }
  
  form {
    display: inline;
    background-color: #000;
    overflow: auto;
    padding: 0;
  }
  </code></pre>