Well i made a css for menu that goes like this
#menus{
height:33px; background:url(images/menu-bg.gif) 0 0 repeat-x;
left:273px;
border-top:dotted 1px #FFFFFF;
position:absolute;
top:92px;
right:0px;
vertical-align:middle;
}
.ul{
height:25px; position:absolute; top:2px; left:5px;
}
.li{width:100px; height:28px; float:left; display:inline;font:14px Verdana, Arial, Helvetica, sans-serif;border-right:1px dotted #969260; text-align:center; vertical-align:middle;}
.li a{width:99px; height:28px; display:block; background:#fff; color:#2F2A28; border-right:1px dotted #969260; font:14px Verdana, Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; vertical-align:middle;}
.li a:hover{width:99px; height:28px; background:#2F2A28; color:#fff; border:none; text-decoration:none; font:14px Verdana, Arial, Helvetica, sans-serif; vertical-align:;}
.li:hover{
display:inline;
vertical-align:middle;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
border-right:1px dotted #969260;
text-align:center;
}
now this displays the divison in place while viewing from IE7 but probably the <li> tag is lower than the main div by some 7-8px in google chrome. What do i do? Any hacks to fix this.