Problem with Drop Down Tabs Menu in Chrome

[ginc]

Hi all,

Drop Down Tabs (5 styles) is not working properly in Google Chrome. Works fine in IE8. I am using custom width for menu fixed at 180px.

In Chrome the width is not accepted somehow where as the custom width of 210px for drop down is detected perfectly.

See attachment.

You cam test menu on http://www.dryall.net/redesign/

Thx in advance.

[tomywie]

shortened the code a bit, but try this:



.bluetabs {
width: 100%;
}

.bluetabs ul {
font:normal normal bold 12px/normal Verdana;
list-style-type:none;
margin:0;
padding:0;
text-align:left;
}

.bluetabs li {
margin:0;
float:left;
width: 180px;
}

.bluetabs li a {
text-decoration:none;
width:180px;
border:1px solid #777788;
padding:8px 7px;
background:#FFF url(http://www.dryall.net/redesign/dropdowntabfiles/media/bluetab.gif) 0 0 repeat;
color:#003366;
margin-right:-5px;
display: block;
}

.bluetabs li a:visited {
color:#003366;
}

.bluetabs li a:hover {
color:#2D2B2B;
text-decoration:underline;
}

.bluetabs li.selected {}

.bluetabs li.selected a {
background:url(http://www.dryall.net/redesign/dropdowntabfiles/media/bluetabactive.gif);
border-bottom: #FFF;
}

.bluetabs li.selected a:hover {
text-decoration:none;
}

.dropmenudiv_b {
border: 1px solid #918D8D;
border-top: 0;
font:normal normal normal 12px/normal Verdana;
line-height:18px;
position:absolute;
top:0;
visibility:hidden;
width:230px;
z-index:100;
}

.dropmenudiv_b a {
border-bottom:1px solid #918D8D;
color:#003366;
display:block;
padding: 2px 0;
text-decoration:none;
text-indent:5px;
width:auto;
}

* html .dropmenudiv_b a {
width:100%;
}

.dropmenudiv_b a:hover {
background-color:#EDF3F3;
}