Center navigation bar - html

Question

I'm trying to center my nav bar.
HTML is
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li style="margin-right: 0px;">SERVERE
<li style="margin-right: 0px;">FAQ</li>
<li style="margin-right: 0px;">KONTAKT</li>
</ul>
</nav>
CSS is
nav {margin: 3px 0; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 106px;
margin: 0px 10px 0 0;
}
nav ul li a:hover {background: #f1f1f1;}
Right now it floats from left to right. I want to center it.
Bonus question; if someone know this, if you can point me in the direction on how to create a touch compatible sub menu for "doner".
Thanks for your time.
hjortefjellet.com

Answer 1

If you want the elements to be in a line, I would use li { display:inline-block; }
then yo can define for your nav element: margin: 3px auto;.
Did I understand you right that you want a dropdown menu for the items in the nav? That's not too difficult: Add the dropdown menu as a div element into the li element:
<li>
HJEM
<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; }

Answer 2

Just do this
nav {
margin: 3px auto;
}

Answer 3

first of all, close your 4th "li" tag. Also, add "margin:0 auto;" to "nav ul" and remove inline styles.
code should look like this:
HTML
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li>SERVERE</li>
<li>FAQ</li>
<li>KONTAKT</li>
</ul>
</nav>
And CSS
nav {margin: 3px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; margin:0 auto; display:block;}
nav ul li a {
background: none repeat scroll 0% 0% #FFF;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0px;
width: 106px;
}
nav ul li a:hover {background: #f1f1f1;}
http://jsfiddle.net/Sb42u/1/

Answer 4

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>HJEM</li>
<li>FORUM</li>
<li>
DONER
<ul class="submenu">
<li>SERVERE
<li>FAQ</li>
<li>KONTAKT</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;
}
Fiddle here: http://jsfiddle.net/9Yg47/4/