title: How to make fixed horizontal menu as image below on top of page
body: <p>I need to make a horizontal menu on top of the page like the image bellow :</p>
  
  <p><a href="https://i.stack.imgur.com/abA3S.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/abA3S.jpg" alt="enter image description here"></a></p>
  
  <p>I tried to make it in fiddle, but the problem is it does not display</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    /* Set the navbar to fixed position */
    top: 0;
    /* Position the navbar at the top of the page */
    width: 100%;
    /* Full width */
  }
  li {
    float: left;
  }
  li a {
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#home"&gt;الرئيسيه&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#news"&gt;نبذه عن&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#contact"&gt;اتصل بنا&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>So that how to make fixed horizontal menu on top of page as image above ?</strong></p>
  
  <p><a href="https://jsfiddle.net/ahmedsa/7x76kj57/" rel="nofollow noreferrer">Here</a> is the link to the fiddle</p>