Center Navigation Bar

February 01, 2023 Post a Comment

I'm trying to center my nav bar. HTML is

HJEM

<li>
  <a href="../help.html">HJEM</a>
  <div class="dropdown">Hello!<br />I'm a dropdown menu!</div>
</li>

Then add to the stylesheet:

.dropdown {
  display:none;
  position:absolute;
  top:56px;
  background-color:#f1f1f1;
  width:200px;
  padding:10px;
}

li:hover .dropdown, .dropdown:hover { display:block; }

Solution 2:

Just do this

nav {
   margin: 3px auto;
}

Solution 3:

1. To center your nav bar:

You just need to change margin: 3px 0; to margin: 3px auto in nav.

2. To create a DropDown menu:

First I would advise to change your markup this way:

<nav>
    <ul>
       <li><a href="../help.html">HJEM</a></li>
       <li><a href="instructions.html">FORUM</a></li>
       <li>
             <a href="instructions.html">DONER</a>
             <ul class="submenu">
                <li><a href="legal.html">SERVERE</a>
                <li><a href="legal.html">FAQ</a></li>
                <li><a href="legal.html">KONTAKT</a></li>
             </ul>
       </li>
    </ul>
  </nav>

Then you can simulate a dropdown using this css classes:

nav ul li{ 
   position:relative; 
   float:left;
}

nav ul li ul.submenu {
    position: absolute;
    width: auto;
    display:none;
    top: 35px;
}
nav ul > li:hover > ul {
    left: 0;
    display: block;
}