Nav menu breaking every other click

[RopeADope]

Hi all.

 

I'm getting some really weird behavior from a navigation menu.  When I go to the initial page, it displays as a list and everything is overlapping.  When I click a link, it displays as multiple tiers like its supposed to.  This doesn't happen every time so I can't figure out what the issue is.  Also, if I click the same link a bunch of times, every 2nd or 3rd click sends the menu to a list format then back to rows.  I feel like I might've missed something in the code but for the life of me, I can't find it.  Pertinent code is below...

.tier{
   position:relative;
   display:block;
   padding-bottom:3px;
   width:100%;
   height:2em;
   line-height:2em;
   font-size:1em;
   background:transparent url('../images/nav_tier_tile.jpg') repeat-x top left;
   border-bottom:#000 solid 1px;
}
.subtier{
   position:relative;
   padding-bottom:3px;
   width:100%;
   height:1.6em;
   line-height:1.6em;
   font-size:0.8em;
   background:transparent url('../images/nav_subtier_tile.jpg') repeat-x top left;
   border-bottom:#000 solid 1px;
}
.subtier a:link,a:active,a:visited, .tier a:link,a:active,a:visited{
   display:table-cell;
   padding-left:1em;
   padding-right:1em;
   font-family:sans-serif;
   text-decoration:none;
   color:#000;
   text-shadow:1px 1px #eee;
}
.subtier a:hover, .tier a:hover{
   background-color:#eee;
   color:#000;
   border-bottom-left-radius:1em;
   border-bottom-right-radius:1em;
}

 

Tier 1

<div class="tier">
<a href="/index.php">Home</a>
<a href="/demand_management/">Demand Management</a>
<a href="/engineering/">Engineering</a>
<a href="/steady_state/">Steady State</a>
<a href="/communications/">Communications</a>
<a href="/business_management/">Business Management</a>
<a href="/risk_management/">Risk Management</a>
<a href="/other/">Other</a>
</div>

 

[sunfighter]

You should give us everything that is needed to check out the menu. What you gave us works but its not all there.

[RopeADope]

Switched methods for the navigation.