Hello charisma44,
Your
<div align="center"> 's and
<center> are not helping you as that is deprecated code and should not be used.
Also, in your CSS, you float that menu left.
Try this approach instead:
To center an element you need three things:
- a valid DocType
- an element with a width
- that elements right/left margins set to auto
Something like this -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 800px;
margin: 30px auto;
padding: 200px 0 300px;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
ul#css3menu1, ul#css3menu1 ul {
width: 705px;
margin: 0 auto;
list-style: none;
background-image: url("mainbk.png");
background-repeat: repeat;
border-width: 0px;
border-style: solid;
border-color: #999999;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
ul#css3menu1 ul {
display: none;
position: absolute;
left: 0;
top: 100%;
-moz-box-shadow: 0.7px 0.7px 1px #777777;
-webkit-box-shadow: 0.7px 0.7px 1px #777777;
box-shadow: 0.7px 0.7px 1px #777777;
padding: 0 9px 9px;
background-color: #00546b;
background-image: none;
border-width: 1px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-style: solid;
border-color: #5A5E60;
}
ul#css3menu1 li:hover>* { display: block; }
ul#css3menu1 li:hover { position: relative; }
ul#css3menu1 ul ul {
position: absolute;
left: 100%;
top: 0;
}
ul#css3menu1 {
padding: 1px 1px 1px 0;
display: block;
font-size: 0;
}
ul#css3menu1 li {
display: block;
white-space: nowrap;
font-size: 0;
float: left;
}
ul#css3menu1>li, ul#css3menu1 li { margin: 0 0 0 1px; }
ul#css3menu1 ul>li { margin: 1px 0 0; }
ul#css3menu1 a:active, ul#css3menu1 a:focus { outline-style: none; }
ul#css3menu1 a, ul#css3menu1 a.pressed {
display: block;
vertical-align: middle;
text-align: left;
text-decoration: none;
font: bold 12px Arial;
color: #cccccc;
cursor: default;
}
ul#css3menu1 ul li {
float: none;
margin: 9px 0 0;
}
ul#css3menu1 ul a {
text-align: left;
padding: 8px 0 0 0;
background-color: #00546b;
background-image: none;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #262626;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font: 13px Arial;
color: #ffffff;
text-decoration: none;
}
ul#css3menu1 li:hover>a {
background-color: #00c4ff;
border-style: none;
font: bold 12px Arial;
color: #ffffff;
text-decoration: none;
background-image: url("mainbk.png");
background-position: 0 100px;
}
ul#css3menu1 img {
border: none;
vertical-align: middle;
margin-right: 10px;
}
ul#css3menu1 img.over { display: none; }
ul#css3menu1 li:hover > a img.def { display: none; }
ul#css3menu1 li:hover > a img.over { display: inline; }
ul#css3menu1 li a.pressed img.over { display: inline; }
ul#css3menu1 li a.pressed img.def { display: none; }
ul#css3menu1 span {
display: block;
overflow: visible;
background-position: right center;
background-repeat: no-repeat;
padding-right: 0px;
}
ul#css3menu1 a {
padding: 10px;
background-color: #00546b;
background-image: url("mainbk.png");
background-repeat: repeat;
background-position: 0 200px;
border-width: 0px;
border-style: none;
border-color:;
color: #cccccc;
text-decoration: none;
}
ul#css3menu1 li:hover>a, ul#css3menu1 li>a.pressed {
background-color: #00c4ff;
background-image: url("mainbk.png");
background-position: 0 100px;
border-style: none;
color: #ffffff;
text-decoration: none;
}
ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li>a.pressed {
background-color: #0080a3;
background-image: none;
border-style: solid;
border-color: #262626;
font: 13px Arial;
color: #ffffff;
text-decoration: none;
}
ul#css3menu1 li.topfirst>a {
height: 16px;
line-height: 16px;
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
text-shadow: #000000 0px -1px 1px;
}
ul#css3menu1 li.topfirst:hover>a, ul#css3menu1 li.topfirst>a.pressed {
line-height: 16px;
text-shadow: #3d3d3d 0px -1px 1px;
}
ul#css3menu1 li.topmenu>a {
height: 16px;
line-height: 16px;
text-shadow: #000000 0px -1px 1px;
}
ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu>a.pressed {
line-height: 16px;
text-shadow: #3d3d3d 0px -1px 1px;
}
ul#css3menu1 li.toplast>a {
height: 16px;
line-height: 16px;
border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
text-shadow: #000000 0px -1px 1px;
}
ul#css3menu1 li.toplast:hover>a, ul#css3menu1 li.toplast>a.pressed {
line-height: 16px;
text-shadow: #3d3d3d 0px -1px 1px;
}
ul#css3menu1 ._>li>a { padding: 0; }
ul#css3menu1 li.subfirst>a {
border-width: 0;
border-style: none;
padding: 0;
}
ul#css3menu1 li.subfirst:hover>a, ul#css3menu1 li.subfirst>a.pressed { border-style: none; }
</style>
</head>
<body>
<div id="container">
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="index.html" title="Home" style="width:120px;height:16px;line-height:16px;">Home</a></li>
<li class="topmenu"><a style="width:120px;height:16px;line-height:16px;"><span>Destinations</span></a>
<ul>
<li class="subfirst"><a href="#" title="North America">North America</a>
<ul>
<li><a href="#">Canada</a></li>
<li><a href="#">Cuba</a></li>
<li><a href="#">Mexico</a></li>
<li><a href="#">Suriname</a></li>
<li><a href="#">United States</a></li>
</ul>
</li>
<li class="subfirst"><a href="#" title="Central America">Central America</a>
<ul>
<li><a href="#">Costa Rica</a></li>
<li><a href="#">EI Salvador</a></li>
<li><a href="#">Guatemala</a></li>
<li><a href="#">Honduras</a></li>
<li><a href="#">Nicaragua</a></li>
<li><a href="#">Panama</a></li>
<li><a href="#">Turks And Caicos Islands</a></li>
</ul>
</li>
<li class="subfirst"><a href="#" title="South America">South America</a>
<ul>
<li><a href="#">Argentina</a></li>
<li><a href="#">Bolivia</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">Chile</a></li>
<li><a href="#">Columbia</a></li>
<li><a href="#">Ecuador</a></li>
<li><a href="#">French Guiana</a></li>
<li><a href="#">Guyana</a></li>
<li><a href="#">Paraguay</a></li>
<li><a href="#">Peru</a></li>
<li><a href="#">Uruguay</a></li>
<li><a href="#">Venezuela</a></li>
</ul>
</li>
<li><a href="#" title="Patio's">Europe</a></li>
<li><a href="#" title="Patio's">Caribbean</a></li>
<li><a href="#" title="Patio's">Africa</a></li>
<li><a href="#" title="Patio's">Middle East</a></li>
<li><a href="#" title="Patio's">Australia</a></li>
<li><a href="#" title="Patio's">Asia</a></li>
</ul>
</li>
<li class="topmenu"><a style="width:120px;height:16px;line-height:16px;"><span>Resources</span></a></li>
<li class="topmenu"><a style="width:120px;height:16px;line-height:16px;"><span>Comments</span></a></li>
<li class="topfirst"><a href="index.html.html" title="Contact" style="width:120px;height:16px;line-height:16px;">Contact</a></li>
</ul>
</li>
</ul>
<!--end container--></div>
</body>
</html>
Before you post, read our: 
