On a pretty basic page (starting from a Dreamweaver one column elastic template), I am trying to put a CSS driven menu, based on one of the tutorials on Lynda.com. When I preview in browsers, the menu jumps up when rolled over, which is very distracting. you can take a look at http://www.gallerycommunications.com/fmp/index-fmp.html Will appreciate any insights anyone has to offer.

here the html CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Frontier Markets Partners home page</title>
<link href="css/fmp-oneColElsCtr.css" rel="stylesheet" type="text/css" />

<meta name="description" content="Frontier Markets Partners" />
<meta name="keywords" content="emerging markets, Africa, " />
<body class="oneColElsCtr">

  <div id="container">
  <div id="header">  <!--header div contains top navigation -->

    <li><a href="#">HOME</a></li>
    <li><a href="#">OVERVIEW</a></li>
    <li><a href="#">OUR TEAM</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">CAPABILITIES</a></li>
    <li><a href="#">CASE STUDIES</a></li>
    <li><a href="#">BLOG</a></li>
    <li class="bordernone"><a href="#">CONTACT US</a></li>
</div> <!-- end header div -->
  <div id="mainContent">
<img src="images/fmp_logo-1052x600.gif" width="1052" height="600" alt="Frontier Markets Partners logo" /> 
</div> <!-- end #mainContent -->

<div id="footer">

</div> <!-- end footer div-->
<!-- end #container --></div>

Here's the CSS I'm trying

@charset "UTF-8";
/* Frontier Markets Partners site main CSS Document */

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #b5a586;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
.oneColElsCtr #container {
    width: auto;
    background: #b5a586;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 0px ;
    text-align: left; /* this overrides the text-align: center on the body element. */
    margin-top: 20px;
.oneColElsCtr #mainContent {
    padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    /*background-color: #b5a586;  */
    background: url(.../images/fmp_logo-1052x600.gif) no-repeat left top;

#header {   
    left: 0;
    top: 0;
    height: 40px;
    position: relative;
    padding: 40px;
    background-color: #b5a586;


    /* main navigation styles  */
#header ul{
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    position: absolute;
    bottom: 0;
    width: 860px;
    list-style: none;
    display: block;

#header ul li {
    float: left;


#header ul a {
    padding: 0 1.1em;
    font-size: 14px;
    line-height: 1.5em;
    text-decoration: none;
    color: #000;
    float: left;
    display: block;

#header ul a.first{
    background: none;

#header ul a:hover {
    color: #fff;
    height: 80px;

/* end top navigation menu styles */

Just an added note on my initial posting -- both the html and the css code validate with the w3.org validators.


height: 80px;


#header ul a:hover {
color: #fff;
height: 80px;