<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<style type="text/css">
body { margin:0px; padding:0px;
font-family: "宋体";
font-size: 12px;
}
#lists {list-style:none; position:relative;float:left; width:200px}
#lists li {display:inline; float:left;;}
#lists li a.tl {display:block; width:15px;text-decoration:none; font-size: 11px;color: #666666;font-family:Arial, Helvetica, sans-serif;font-weight: bold; text-align:center;}#lists div {display:none;}#lists li a:hover {text-decoration:underline; white-space:normal; color:#FF6600; background-color:#eaf9ff; border:1px solid #cff1ff}
#lists li:hover a {text-decoration:underline; white-space:normal; color:#FF6600}#lists :hover div
{display:block; width:398px; background:#eaf9ff; position:absolute; left:0; top:25px; border:1px solid #cff1ff; padding-bottom:10px; }#lists :hover div dl {display:inline; padding:0; margin:0 10px 10px 10px; float:left; width:179px;}#lists :hover div dl dd {padding:0; margin:0;
}
#lists :hover div dd a {display:block; text-decoration:none; font-weight:normal; font-size:12px; color:#000; text-indent:10px; line-height:15px;}
#lists :hover div dd a:hover {text-decoration:underline;}#lists .clear {clear:both;}
</style>
<body>
  <div style="float:left; width:200px;">
<ul id="lists">
<li>a href="#" class="tl" >A</a>
<div >
<dl>
<dd><a href="#">Alabama</a></dd>
<dd><a href="#">Alaska</a></dd>
</dl>
<dl>
<dd><a href="#">Delaware</a></dd>
<dd><a href="#">Florida</a></dd>
</dl>
<dl>
<dd><a href="#">Nebraska</a></dd>
<dd><a href="#">Nevada</a></dd>
</dl>
</div></li>
</div>
</body>
</html>
怎么让他能在IE6下显示 隐藏的呢,大家帮帮忙! 谢谢了!

解决方案 »

  1.   

    charset=utf-8这个换下看看呢
     
      

  2.   

    有关系吗? 好像是IE6 不支持#lists :hover ,
    但是我很菜 ,不知道怎么改啊?
      

  3.   

    呵呵,刚好我正在用纯CSS做这个效果,做是可以做出效果,但是有缺点(里面如果含有a标签就不显示文字了,我还在调试,测试,如果你能调试出来就帖出来),我给你看一个我写的例子:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    *{
     margin:0;
     padding:0;
    }
    div{
    width:760px;
    height:30px;
    margin:0px auto;
    font-size:12px;
    border:#CCCCCC dashed 1px;
    }
    ul {
     list-style:none;
     margin:0px;
    padding:0px;
    }
    li {
    float:left;
     height:30px;
     width:190px;
     background:#000;
     font-size:12px;
     line-height:30px;
    }
    li a {
     display:block;
     text-align:center;
     height:30px;
     width:190px;
     position:relative;
     color:#fff;
     text-decoration:none;
    }
    li dl {
    text-align:center;
     display:none;
     left:0px;
    width:190px;
    }
     li dl dd{
    text-align:center;
    color:#fff;
    margin:0px;
    padding:0px;
    }
    li dl dd a{
    display:block;
    color:#fff;
    text-decoration:none;
    }
    li dl dd a:hover{
    display:block;
    background:#FFF;
    text-decoration:none;
    }
    li a:hover {width:189px;color:#fff;}
    li a:hover dl{
     display:block;
     width:190px;
     height:30px;
     background:#c00;
     position:absolute;
     color:#fff;
     top:30px;
     left:0px;
    }
    li a:hover dl dd{
     display:block;
     color:#fff;
    }
    li a:hover dl dd a:hover{
     display:block;
     color:#fff;
    }
    </style>
    </head>
    <body>
    <div>
    <ul>
    <li><a href="#">home
    <dl>
    <dd><a href="#">about us</a>
    </dd>
    </dl>
    </a>
    </li>
    <li><a href="#">news
    <dl>
    <dd><a href="#">hot news</a>
    </dd>
    </dl>
    </a>
    </li>
    <li><a href="#">produts
    <dl>
    <dd><a href="#">new produts</a>
    </dd>
    </dl>
    </a>
    </li>
    <li><a href="#">book
    <dl>
    <dd><a href="#">new book</a>
    </dd>
    </dl>
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>