Question

求CSS+DIV的导航？

当鼠标滑过导航时会出现二级导航，纯CSS+DIV的

Answer 1

这个效果有几种标明：
一、同一页面下多滑动门
/*--------------样式----------------*/
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */

.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:240px;/*滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:24px;width: 80px;cursor:pointer;}
/* 控制显示与隐藏css类 */
.normaltab { color:#1F3A87 ;}
.hovertab { color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
/*-----------------标签----------------*/
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onmouseover="HoverLi(1);">
国内新闻</li>
<li id="tb_2" class="normaltab" onmouseover="HoverLi(2);">
国际新闻</li>
<li id="tb_3" class="normaltab" onmouseover="HoverLi(3);">
图说新闻</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div>
<div class="undis" id="tbc_02">这里是MYSQL的相关内容</div>
<div class="undis" id="tbc_03">这里是DELPHI的相关内容</div>
</div>
</div>
/*---------------JS-----------------*/
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=3;i++)
{g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}

g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
二、纯DIV+CSS下拉菜单
/*--------------样式----------------*/
*{
margin: 0;
padding: 0;
border:0;
font-size: 12px;
font-family:"宋体", "新宋体", "仿宋_GB2312", "Arial Unicode MS", Arial;
}
ul{
list-style: none;
}
li {
float: left;
position:relative;
}
table{
position:absolute;
top:0;
left:0;
}
a{
display: block;
width:150px;
height:35px;
line-height:35px;
background:#333333;
color:#fff;
text-decoration:none;
text-align:center;
}
a:hover{
background:#333333;
color: #BD6B09;
cursor:hand;
}
#outside{
margin:5px 0;
}
li:hover .inside,
a:hover .inside{
display:block;
position:relative;
left:-2px;
top:33px;
background:#CCC;
}
.inside {
display:none;
}
.inside span a{
background:#ccc;
color:#000;
}
.inside span a:hover{
color:#FFF;
background:#36F;
}
/*--------------标签--------------*/
<div id="outside">
<ul>
<li><a href="#">视频教程
<table><tr><td>
<div class="inside">
<span><a href="#" target="_blank">平面设计</a></span>
<span><a href="#" target="_blank">编程开发</a></span>
<span><a href="#" target="_blank">三维动画</a></span>
<span><a href="#" target="_blank">网页制作</a></span>
<span><a href="#" target="_blank">Flash动画</a></span>
</div>
</td></tr></table></a>
</li>

<li><a href="#">数码科技
<table><tr><td>
<div class="inside">
<span><a href="#" target="_blank">硬件报价</a></span>
<span><a href="#" target="_blank">电脑攒机</a></span>
<span><a href="#" target="_blank">攒机方案</a></span>
</div>
</td></tr></table></a>
</li>

<li><a href="#">新闻娱乐
<table><tr><td>
<div class="inside">
<span><a href="#" target="_blank">小游戏</a></span>
<span><a href="#" target="_blank">聊天室</a></span>
<span><a href="#" target="_blank">新闻视频</a></span>
</div>
</td></tr></table></a>
</li>
</ul>
</div>
具体还些方法可以实现，你可以M我，现在要上班了，先写这两个。

Answer 2

http://www.lanrentuku.com/js/nav.html
这里面都是纯DIV+CSS的 二级三级的都有 自己选择要什么样的

Answer 3

onMouseOut="this.className='a1'" onMouseOver="this.className='a2'"
去查查用法，基本上可以解决很多问题，很多JS都可以用他来代替的。

Answer 4

http://hi.baidu.com/41907446/blog/item/11f3512cceb992ef98250a34.html

看看这个是不是你想要的效果