Center Navigation Bar

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

• HJEM

• <li><ahref="../help.html">HJEM</a><divclass="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><ahref="../help.html">HJEM</a></li><li><ahref="instructions.html">FORUM</a></li><li><ahref="instructions.html">DONER</a><ulclass="submenu"><li><ahref="legal.html">SERVERE</a><li><ahref="legal.html">FAQ</a></li><li><ahref="legal.html">KONTAKT</a></li></ul></li></ul></nav>

Then you can simulate a dropdown using this css classes:

navulli{ 
   position:relative; 
   float:left;
}

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

Fiddle here:http://jsfiddle.net/9Yg47/4/