Problem with CSS Menu on my site

My name is David Bodenheimer and I work for the Riviera Beach Police Department, in Palm Beach County Florida.
I am currently helping design the Intranet site for our Department.

I have a piece of css code (site.css See BELOW), that I am using to make my menus.

I have just one small issue and was hoping someone could resolve it for me. When I click the Home button it reloads for a second in a vertical row and it just doesn't look fluid. This doesn't happen when I click any of the buttons besides the home button.

I have attached a photo of how it looks before clicking home and a photo of what it looks like for about a second after hitting home. The css code is below.

/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}
a img {
border: none;
}

a.preview {
border: none;
}

p
{
    margin-bottom: 1px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 960px;
    background-color: #fff;
    margin: 10px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
    top: 0px;
    left: 0px;

}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    min-height: 280px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#465c71;
}



/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
    height: 0px;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

div.Menu
{
    padding: 0px 0px 0px 0px;
}

div.Menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 0px;
}

div.Menu ul li a, div.Menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 1px 1px;
    text-decoration: none;
    white-space: nowrap;
}

div.Menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #ffff40;
    text-decoration: none;
}

div.Menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

.MenuButton 
{
background: #465c71;
color: #FFFFFF;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
width: 140px;
font-size: 10pt;
padding: 2px 0;
text-align: center;
display: block;

border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-top-left-radius: 10px 10px;
-moz-border-top-right-radius: 10px 10px;
-webkit-border-top-left-radius: 10px 10px;
-webkit-border-top-right-radius: 10px 10px;
background: #3F8EB5; /* old browsers */
background: -moz-linear-gradient(top, #7b9ccf 0%, #4b6c9f 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b9ccf), color-stop(100%,#4b6c9f)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9ccf', endColorstr='#4b6c9f',GradientType=0 ); /* ie */
}
tr {
	font-family: Arial;
	font-size: 10pt;
}

td {
	font-family: Arial;
	font-size: 10pt;
}
      .logo
        {
            width: 372px;
            height: 90px;
        }
ListViewRow
{
    background-color:  #FFFFFF;
}
ListViewRowA
{
    background-color: #CCCCFF;

Code (markup):

It is not a major flaw, but something that makes the site look unprofessional and I am desperately looking to fix it.

Any help would be greatly appreciated.

 

It's far more difficult to tell what's going on without the HTML. A link is always preferable, too.

 

Sorry the link is an INTERNAL Intranet site, so it can not be accessed by the public.

Any ideas at all? What else do you need as far as code?

 

Showing us the CSS alone is like showing us paint colors and asking if we like a Monet. Without the outline, the HTML, it will be either not possible or too much work.

Can you create a simple test page and show that HTML?