html nav 置顶居中,如何让我的<nav>栏始终在页面中居中使用CSS3？

而且我怎样才能让颜色伸展过去呢？ (我知道我需要更改列表项目的背景颜色，但似乎没有其他工作)。

这里是我的CSS代码：

#nav {font-family: journalregular;

width: 90%;

box-shadow: 0px 7px 22px -6px rgba(0,0,0,0.75);}

#nav ul {

list-style: none;

padding: 0;

margin: 0;

background:#ffffff;

}

#nav a {

font-weight: bold;

font-size: 250%;

color: black;

text-decoration: none;

cursor: default;

}

#nav li li a {

display: block;

font-weight: normal;

font-size: 180%;

font-weight: bold;

color: black;

padding: 10px 10px;

}

#nav li li a:hover {cursor:pointer;

background: pink;}

#nav li {

display: inline-table;

position: relative;

width: 10em;

text-align: center;

cursor: default;

background-color: #DEB887;

/*border: 1px solid #7d6340;

border-width: 0px 0px 1px 0px;*/

}

#nav li ul{

position: absolute;

top: 100%;

width:10em;

font-weight: normal;

padding: 0.5em 0 1em 0;

border: solid 1px #DEB887;

}

#nav li>ul {

top: auto;

left: auto;

display: none;

opacity: 0;

transition: display .5s;

}

#nav li li {

display: block;

float: none;

background-color: white;

border: 0;

}

#nav li:hover > ul{

display: block;

opacity: 1;

}

a{text-decoration: none;}

而我的HTML代码：

• Geography

• Ambience

  • House
  • 1
  • 2
  • 3

• Pets

  • 1
  • 2

• Food

  • 1
  • 2

+0

显示您的网页代码。 –

2014-10-11 01:44:50

+0

@Cattla对不起。我已经做了。 –

2014-10-11 01:49:26

+0

http://jsfiddle.net/nn998nn0/1/这是你想要的吗？ –

2014-10-11 02:34:05