I'm trying to make a simple responsive navigation but i can't seem to eliminate the spaces inbetween the links. Any help would greatly be appreciated.
This is my code:
css:
.nav{
width:100%; text-align:centre; margin:0 auto;max-width:1010px;
}
.nav ul{
line-height:50px;
}
.nav li{
display:inline; list-style-type: none;border-right:#333333 1px solid;
}
.nav li:hover{
}
.nav a{
text-decoration:none; padding:10px; color:#000; font-family: sans-serif;
}
.nav a:hover{
color:#c00;background:#999999;
}
html:
<div class="nav"><!-- nav -->
<span class="menu-button"></span>
<ul class="clearfix menu">
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/nav-->
With CodeRomeos answer, most of the spacing/padding was removed but there was still some spacing between the links. From your request to eliminate the spacing between the links then the below solution will completely remove spacing (although it would look better IMO with at least some padding between links).
.nav {
width: 100%;
text-align: centre;
margin: 0;
max-width: 1010px;
}
.nav ul {
line-height: 16px;
}
.nav li {
display: inline;
list-style-type: none;
border-right: #333333 1px solid;
margin: 0;
padding: 0;
float: left;
}
.nav a {
text-decoration: none;
color: #000;
font-family: sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.nav a:hover {
color: #c00;
background: #999999;
}
<div class="nav">
<span class="menu-button"></span>
<ul class="clearfix menu">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
I just switched your css a bit from display: inline to float: left for the li tags. Hope it helps, though float may not be the best approach here.
.nav li {
display: inline;
}
to
.nav li {
float: left;
}
http://codepen.io/anon/pen/OyVLOK
As in your css there is padding defined 10px.
.nav a{
text-decoration:none; padding:10px 5px; color:#000; font-family: sans-serif;
}
set it to
.nav a{text-decoration:none; padding:10px 2px; color:#000; font-family: sans-serif;}
Hope this help you.!
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 3 years ago.
I'm building my first website with HTML5, and have run into a problem that is driving me insane. I'm trying to perfectly center the items within a horizontal navigation bar at the top of my page. The items are within an unordered list.
I have display:inline-block applied to the list items with text-align:center on the parent. It seems to want to work, but it appears just to the right of the center. I tried taking everything out of a list and simply putting it into a div, and it immediately worked and centered perfectly, but I could not figure out how to efficiently format the individual elements without having them in a list. As soon as I put them back into a list, they shifted back over to the right. I have put a white background on the header to make it easier to see the alignment.
#menu {
width: 960px;
max-height: 90px;
background: #ffffff;
}
#menu ul {
text-align: center;
list-style: none;
padding-top: 18px;
width: 960px;
}
#menu li {
display: inline-block;
vertical-align: middle;
}
#menu li a,
menu li a:visited {
color: #333347;
text-decoration: none;
font-size: 20px;
font-weight: bold;
padding: 0px 13px 0px 13px;
}
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
I expected it to center the list, but it appears slightly to the right of the center.
You Try
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
CSS:
#menu{
width:960px;
max-height:90px;
background:#ffffff;
}
#menu ul{
text-align:center;
list-style:none;
padding: 18px 0 0 0;
width:960px;
}
#menu li{
display:inline-block;
vertical-align:middle;
}
#menu li a,menu li a:visited{
color:#333347;
text-decoration:none;
font-size:20px;
font-weight:bold;
padding:0px 13px 0px 13px;
}
It will make list at center
I have removed the default padding of ul set by the user agent stylesheet. Also I have centered the nav container using auto margin. hope this helps.
html,body{
margin: 0;
padding: 0;
}
#menu{
width:960px;
max-height:90px;
background:#ffffff;
margin: 0 auto;
}
#menu ul{
text-align:center;
list-style:none;
padding: 18px 0 0;
width:960px;
margin: 0 auto;
}
#menu li{
display:inline-block;
vertical-align:middle;
}
#menu li a,menu li a:visited{
color:#333347;
text-decoration:none;
font-size:20px;
font-weight:bold;
padding:0px 13px 0px 13px;
}
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
Try to add these styles:
#menu{
....
margin: 0 auto;
}
#menu ul{
....
padding-left: 0;
}
you need to remove default margin and padding from html elements like this:
*{
margin:0;
padding:0
}
Please use this css.
#menu {
width: 960px;
max-height: 90px;
background: #ffffff;
margin-left:auto;
margin-right:auto;
}
#menu ul {
text-align: center;
list-style: none;
padding-top: 18px;
width: 960px;
padding-left: 0;
}
#menu li{
display:inline-block;
vertical-align:middle;
}
#menu li a,menu li a:visited{
color:#333347;
text-decoration:none;
font-size:20px;
font-weight:bold;
padding:0px 13px 0px 13px;
}
This is due to ul have by default 40px left padding. So you need to remove that left padding from ul.
#menu ul{
...
padding-left:0;
}
/*or*/
#menu ul{
...
padding: 18px 0 0;
}
Put 0 padding on your #menu ul instead of not defining it at all. Like this:
padding: 18px 0px;
I've edited the widths in order to fit it better into the snippet window, and I also added background color to the #menu.
#menu {
width: 100%;
max-height: 90px;
background: #dd0;
}
#menu ul {
text-align: center;
list-style: none;
padding: 18px 0px;
width: 100%;
}
#menu li {
display: inline-block;
vertical-align: middle;
}
#menu li a,
menu li a:visited {
color: #333347;
text-decoration: none;
font-size: 20px;
font-weight: bold;
padding: 0px 13px;
}
<nav id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Gallery</li>
<li class="menuitem">Shop</li>
<li class="menuitem">Contact</li>
</ul>
</nav>
I've change a little your code to make it a little more simplier (Try not to use ID's on CSS, always prefer to use classes instead):
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Home</li>
<li class="menu-item">Gallery</li>
<li class="menu-item">Shop</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
And for the CSS (The trick is to use the 100% of the width where you put the menu, also prefer to use Flexbox that made a lot more simpler to align items in the DOM):
.menu {
display: flex;
flex-direction: row;
width: 100%;
max-height: 90px;
background: #ffffff;
margin: 0 auto;
}
.menu-list {
display: flex;
flex-direction: row;
justify-content: center;
list-style:none;
padding-top:18px;
width:100%;
padding-left: 0;
}
.menu-item a, .menu-item a:visited{
color: #333347;
text-decoration: none;
font-size: 20px;
font-weight: bold;
padding-left: 1em;
}
Hope this help.
I am trying to build a website, and in my footer section I am facing an issue that, I can't properly position my tag below the social media icons, and also cannot position the li elements "terms of use","content guidelines","report error" in a horizontal style.also i cannot remove the underline on the li after removing the text decor,and cannot remove the bullets from the li elements..pls help
footer
{
width: 100%;
background-color: #2d2d2d;
padding: 80px 0px;
}
footer h2 {
font-size: 16px;
color: #a1a1a1;
text-transform: uppercase;
margin-top: -20px;
margin-bottom: 25px;
margin-left: 20px;
}
h2 {
font-size: 20px;
font-family: 'Gothic-Bold';
font-weight: normal;
position:sticky;
margin-bottom: 20px;
}
* {
padding: 0px;
margin: 0px;
}
.ft-quick-links
{
float:left;
width:400px;
}
.ft-quick-links ul li{
float:left;
margin-right:6px;
margin-bottom:20px;
margin-left: 5px;
list-style: none;
padding-right: 5px;
}
.ft-quick-links li a{
padding: 8px 15px;
font-size: 13px;
color: #959595;
background:#202020 ;
text-decoration: none;
margin-bottom: 30px;
}
.ft-quick-links li a:hover{
background:#171717;
}
.footer-btm-wrapp{
width:100%;
display:table;
background:#1b1b1b;
}
.ft-btm-left {
float:left;
}
.ft-btm-left ul li{
float:left;
margin-right:40px;
}
.ft-btm-left ul li a{
font-size:12px;
color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
text-decoration:none;
}
.footer-btm-wrapp .wrapper{
padding:20px 0px;
}
.ft-social ul li{
float: right;
padding-right: 20px;
padding-top: 15px;
list-style: none;
}
.footer-btm-wrapp .wrapper{
padding:8px 0px;
list-style: none;
}
.copy-rights p{
color:#959595;
font-size:13px;
list-style: none;
margin-bottom: 10px;
padding: 60px 20px 10px;
float:right;
text-align:right;
list-style: none;
}
.wrapper{
width:1100px;
margin:0px auto;
position:relative;
}
.ft-lines{
font-size: 12px;
color: #5f5f5f;
list-style: none;
margin-bottom: 10px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet"type="text/css" href="foot1.css">
<footer>
<div class="wrapper">
<div class="ft-quick-links">
<h2>Quick Links</h2>
<ul class="clearfix">
<li>About</li>
<li>Media</li>
<li>Feedback</li>
<li>Privacy policy</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="ft-social">
<ul class="clearfix">
<li><img src="images/yt.png"/></li>
<li><img src="images/ig.png"/></li>
<li><img src="images/twit.png" /></li>
<li><img src="images/fb.png" /></li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="ft-lines">
<ul class="clearfix">
<li>Terms of Use</li>
<li>Content Guidelines</li>
<li>Report error </li>
</ul>
<div class="copy-rights"><p> © 2017 Rodeo labs. All rights reserved</p>
</div>
</div>
</div>
</footer>
</body>
</html>
I hope this code will be useful to you
footer
{width: 100%;background-color: #2d2d2d;/* padding: 54px 0px; */display: flex;height: 6vmin;}
footer h2 {
font-size: 14px;
color: #a1a1a1;
text-transform: uppercase;
}
h2 {
font-size: 20px;
font-family: 'Gothic-Bold';
font-weight: normal;
/* position:sticky; */
}
.ft-quick-links
{
display: flex;
align-items: center;
}
.ft-quick-links a{
padding: 5px;
font-size: 13px;
color: #959595;
background:#202020;
text-decoration: none;
/* margin-bottom: 30px; */
}
.ft-quick-links a:hover{
background:#171717;
}
.footer-btm-wrapp{
width:100%;
display:table;
background:#1b1b1b;
}
.ft-btm-left {
float:left;
}
.ft-btm-left a{
font-size:12px;
color:#5f5f5f;
}
.ft-btm-left a:hover{
text-decoration:none;
}
.ft-social i{
float: right;
padding-right: 20px;
padding-top: 15px;
list-style: none;
}
.copy-rights p{
color:#959595;
font-size:13px;
list-style: none;
text-align:right;
list-style: none;
}
.ft-lines{
/* font-size: 12px; */
color: #5f5f5f;
/* list-style: none; */
/* margin-bottom: 10px; */
text-decoration: none;
}
<footer>
<div class="ft-quick-links">
<h2>Quick Links</h2>
About
Media
Feedback
Privacy policy
</div>
<div class="ft-quick-links">
<img src="images/yt.png">
<img src="images/ig.png">
<img src="images/twit.png">
<img src="images/fb.png">
</div>
<div class="ft-quick-links">
Terms of Use
Content Guidelines
Report error <!--
-->
</div>
<p> © 2017 Rodeo labs. All rights reserved</p>
</footer>
Try adding the top 2 div.wrapper inside a div and style it. According to what you have done in styling, the third div.wrapper is inserted inside the top to in the DOM.
As well add bottom div.wrapper (which contains the divs for the three links and the copyrights) in a different context and do the stylings respectively.
If you're doing this for practice that's fine.
This code that you have written needs more improvement. In production code, this is not the recommended way of writing the code. Please follow some guidelines. Googling 'HTML and CSS best practices guidelines' will help you.
PS - Didn't edit your code since it needs a re-engineering.
.ft-lines{
font-size: 12px;
margin-top: 25px; /*positioning li elements "terms of use","content guidelines","report error"*/
}
.ft-lines li {
list-style: none; /*remove bullets*/
display: inline; /*display in horizontal line li elements*/
margin: 0 10px 0 10px; /*add spaces between links*/
}
.ft-lines a {
text-decoration: none; /*removes underline on links*/
color: #959595;
}
.ft-lines a:hover {
text-decoration: underline; /*adds underline on links*/
}
jus remove your .ft-lines and add mine
hope this helped.
Try following in your css. I have added some comments.
.ft-lines ul li{
list-style: none;
display: inline-block; # This will display li side by side
padding-right: 10px; # add for have a bit of space
}
.ft-lines ul li a {
text-decoration: none;
}
.ft-lines {
clear: both; # to clear the floating elements
float: right;
}
You are not using any framework like bootstrap or foundation. So, first of all, make a proper design of footer layout.
For example -
<ul class="demo">
<li>demo1</li>
<li>demo2</li>
<li>demo3</li>
</ul>
To remove bullet from li use -
ul.demo li
{
list-style-type:none;
}
To remove text-decoration from a use -
.demo li a
{
text-decoration:none;
}
I have an excerpt of code that I need centered in my header, (just the text and the actual padding). I'm new to coding so if this doesn't sound right don't be surprised. This is the code where I need my list items centered in. Try to make your answer as beginner-like as possible.
CSS:
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
HTML:
<div id= "navcontainer">
<!-- BEGIN TABS -->
<ul>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
I know the li elements are messy but I do it so I can see it better. Sorry.
Add a text-align: center to the <ul>:
#navcontainer ul {
text-align: center;
}
Snippet
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
<div id="navcontainer">
<!-- BEGIN TABS -->
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
<ul>
<li>
Jackpot
</li>
<li>
Profile
</li>
<li>
Market
</li>
<li>
Support
</li>
</ul>
</div>
Also, not a good idea to have anything other than <li> inside the <ul>. You have also omitted a </a>.
There were a few errors in your markup, I've gone ahead and fixed them for you. All that's required to center your list items is text-align: center if you're positioning them as inline elements.
<div id= "navcontainer">
<ul>
<li>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
</li>
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
</div>
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
http://jsfiddle.net/ruLns221/
Just to further explain the changes, you should only add li elements to an unordered list (ul) so I've nested your logo within a list item. I've closed some unclosed tags off as well.
I have a horz nav bar at the top of my website that has 7 text links & 6 bullets between the text links. Is there a way to evenly space out the text links & bullets horz across the nav bar. I tired it with the following code, all works well except the bullet spacing is weird and off. Much appreciated for some help on this. Here is the code I have.
Here is a link to my code on fiddle: http://jsfiddle.net/mountart/bdzcv/
<style type="text/css">
div#container{
width:1020px;
}
div#container ul {
display:table;
width: 100%;
margin:0px 0px;
padding-left:0px;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul li {
display:table-cell;
height:20px;
line-height:20px;
width:14.285%;
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;
padding:0px 0px;
text-align: center;
border-right:none;
}
div#container ul li:last-child {
border-right:none;
}
div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
div#container li.headerbullet
{
float:left;
display:inline-block;
width:auto;
margin-left:5px;
margin-right:0px;
height:20px;
line-height:20px;
}
div#container li.headerbullet img
{
margin-top:10px;
}
</style>
<div class="clear"></div>
<div id="container">
<ul>
<li>ARTS & ENTERTAINMENT</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>TECHNOLOGY</b></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>AUTO</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>SPORTS</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>NEWS BRIEFS</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>GREEN ECONOMY</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li><a rel="nofollow" href="http://www.hirediversity.com" target="_blank">CAREER NEWS</a> </li>
</ul>
</div><hr style="margin-top:4px"/>
Let's clean up some of that HTML and CSS :)
We can create the bullets using just the li parents for each link. The padding on #container li will space out the bullets evenly, however large of a gap you want.
Updated
The menu is centred by the combination of margin: auto; and a fixed width (in this case - width: 776px;.
Have a fiddle!
HTML
<div id="container">
<ul>
<li>
ARTS & ENTERTAINMENT
</li>
<li>
TECHNOLOGY
</li>
<li>
AUTO
</li>
<li>
SPORTS
</li>
<li>
NEWS BRIEFS
</li>
<li>
GREEN ECONOMY
</li>
<li>
CAREER NEWS
</li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#container {
overflow: hidden;
}
#container ul {
margin: 10px auto;
width: 776px;
border-bottom: dotted 1px #CCC;
overflow: auto;
padding: 0 0 10px;
}
#container li:first-child {
list-style: none;
margin: 0 0 0 18px;
}
#container li {
float: left;
font-family:"Arial Narrow", Arial, sans-serif;
font-size: 0.8em;
padding: 0 30px 0 2px;
}
#container a:link {
color: #000;
text-decoration: none;
}
#container a:hover {
color: #F00;
text-decoration: underline;
}
You can justify your list elements by making you ul have text-align: justify. Then, make an :after element that has a width: 100% to trick it into thinking there is another line.
See here: (Sorry, I removed some of your CSS to make it easier to read.)
http://jsfiddle.net/ECf2u/
div#container{
width:1020px;
}
div#container ul {
width: 100%;
text-align: justify;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul:after {
content: "";
width: 100%;
display: inline-block;
}
div#container ul li {
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;
text-align: center;
display: inline-block;
position: relative;
}
div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
Here is a simpler solution, using CSS3 flex.
It fully-justifies the menu items, distributing the space evenly around the bullets.
I couldn't figure out how to do the bullets without the extra empty <li><\li> elements.
Link to CodePen
.menu { font: 14px "Arial Narrow", Arial, sans-serif; list-style-type: none; padding:3px }
.menu a { color: black; text-decoration: none }
.menu a:visited, .menu a:active { color: #666 }
.menu a:hover { color: #c00 }
.menu { display:flex; justify-content:space-between; border: 1px solid black; border-width: 1px 0 }
.menu li:empty:after { content:"\2022" }
<ul class="menu">
<li>ARTS & ENTERTAINMENT</li><li></li>
<li>TECHNOLOGY</li><li></li>
<li>AUTO</li><li></li>
<li>SPORTS</li><li></li>
<li>NEWS BRIEFS</li><li></li>
<li>GREEN ECONOMY</li><li></li>
<li>CAREER NEWS</li>
</ul>
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
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; }
Just do this
nav {
margin: 3px auto;
}
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/
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/