Help for CSS Menu Dropdown, FF OK and IE6 Problem

Posted by Taruhku on Stack Overflow See other posts from Stack Overflow or by Taruhku
Published on 2010-05-31T16:15:42Z Indexed on 2010/05/31 16:23 UTC
Read the original article Hit count: 191

Filed under:

css-layout

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>

Developer IT