IE Problem, FF OK. Please help..????
Screen Shoot problem click here
This is my CSS
dolphincontainer
{
position:relative;
height:56px;
color:#E0E0E0;
background:#143D55;
width:100%;
font-family:Tahoma;
left: 0px;
}
dolphinnav
{position:absolute;;height:33px;font-size:12px;font-weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 10px;width:975px;}
dolphinnav ul
{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
dolphinnav ul li
{display:block;float:left;margin:0 1px;}
dolphinnav ul li a
{display:block;float:left;color:#001b2c;text-decoration:none;padding:0 0 0 10px;height:33px;}
dolphinnav ul li a span
{padding:12px 20px 0 0;height:21px;float:left;font-weight:bold;}
dolphinnav ul li a:hover
{color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
dolphinnav ul li a:hover span
{display:block;width:auto;cursor:pointer;}
dolphinnav ul li a.current,#dolphinnav ul li a.current:hover
{color:#fff;background:#00517e url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
dolphinnav ul li a.current span
{display:block;padding:0 20px 0 0;width:auto;background:#00517e url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
.tuckUp
{
display:block;
width:90px;
height:30px;
overflow:hidden;
cursor:pointer;
}
.pullDown
{
width:90px;
height:56px;
}
.item a:link, .item a:visited
{
display:inline;
float:left;
background:#fff url(images/dolphin_bg.gif) repeat-x top left;padding:0 0 0 10px;
text-align:left;
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
line-height:25px;
margin:0 5px 0px 0px;
width:80px;
}
.item a:hover
{
display:inline;
float:left;
background:#39c;
color:#FFF;
text-decoration:none;
text-align:left;
font-size:11px;
font-weight:700;
font-weight:bold;
line-height:25px;
padding:0 0 0 10px;
margin:0 5px 0px 0px;
width:80px;
}
HTML:
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="index.php"><span>Home</span></a></li>
<li><a href="chooseus.php"><span>Why Choose Us</span></a></li>
<li><a href="peraturan.php"><span>Rules</span></a></li>
<li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'"><a href="#"><span>Transaction</span></a>
<div class="item"> <a href="drop1.php">Drop Down 1</a><br />
<a href="drop2.php">Drop Down 2</a></a><br />
<a href="drop3.php">Drop Down 3</a><br />
</div>
</li>
<li><a href="download.php"><span>Download</span></a></li>
<li><a href="aboutus.php"><span>About Us</span></a></li>
<li><a href="help.php" class="current"><span>Support</span></a></li>
<li><a href="promo.php"><span><font color="#FF0000"><blink>PROMO</blink> </font></span></a></li>
</ul>
</div>
</div>
