mouseover issue

[gpigate]

using mouse overs in a navigation bar and have run into an issue.

When the mouse moves over one of the buttons all of the buttons align to the bottom with the one currently moused over.

I would like the non moused over buttons to remain at the top.

I have tried putting the links in their own div's along with everything else I know to do. I think I am missing something simple.

help is appreciated. **Disclaimer** the code below IS NOT PRETTY. Rather ugly. I have been trying to get this fixed for a while and have lost a lot of code integrity due to hackin at it. It can and will be cleaned up later and put back in order. If you have recommendations to short hand syntax or performance please fire away

Code generating the links

echo "<div class=\"chromestyle\" id=\"chromemenu\">\n";
echo "<ul>\n";
$nav1Sql = mysql_query("SELECT * XXXXXXXXXXXXXXXXXXXXXXX");

while ($nav1 = mysql_fetch_array($nav1Sql)) {
    
    $menuitems[] = $nav1['nav1id'];
    
    $relative = ($nav1['nav1_path']=="#") ? " rel=\"dropmenu".$nav1['nav1id']."\"" : "";
    
    echo "<li><a href=\"".$nav1['nav1_path']."\"".$relative."><img onmouseover=\"this.src='themes/".SITE_THEME."/".$nav1['nav_roll']."';\" onmouseout=\"this.src='themes/".SITE_THEME."/".$nav1['nav_img']."';\" src=\"themes/".SITE_THEME."/".$nav1['nav_img']."\" border=\"0\"></a></li>";
}

echo "</ul>\n";
echo "</div>\n"; 

Stylesheet

.chromestyle { font-weight: bold; width: 100%; padding:0px; margin:0px; }

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul   { text-align: center; margin: 0; padding: 0px; width: 100%; margin:0px;}

.chromestyle ul li { display: inline; padding:0px; margin:0px; }

.chromestyle ul li a    { text-decoration: none; margin:0; border:none; padding:0px;}

.chromestyle ul li a:hover  { background: repeat-x center;padding:0px; margin:0px; }

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv         { color: #FFFFFF; font-style: normal; font-variant: normal; font-size: 12px; line-height: 18px; font-family: Arial; background-color: #553926; border: solid 2px #553926; position: absolute; z-index: 100; top: 0; width: 200px; visibility: hidden }


.dropmenudiv a      { color: #FFFFFF; font-size: 8pt; text-decoration: none; text-indent: 3px; padding: 0px; border-top: 0px solid; border-right: 0px solid; border-bottom: 1px solid #FFFFFF; border-left: 0px solid; width: 100%; height: 20px; display: block }

.dropmenudiv a:hover   { color: #000000; background-color: #bf8a56; }

[gpigate]

i went away from trying to extend an individual tab when it was movere'd and just did a tab color change.

i would still like to figure this out though. no matter what I did, it would do this. I completely took the links out of my db queries and ul statements etc. it always dropped them all.

so if anyone has ideas please let me know

[gpigate]

duh....

I decided i would cut the images to include the header image when not movered. so the rollover when movered contains the big tab, and when not... it contains the little tab and part of the header. works fine now.