CSS技巧
纯css的导航菜单
没有js,兼容Firefox


CODE:




<style>
.Nav {

}
.Nav li{
        float:left;
        display:block;
        position:relative;
}
.Nav a{
        float:left;
        display:block;
        position:relative;
        padding:2px 10px 2px 10px;
        font-size:13px;
        text-decoration: none;
}
.Nav li a:hover
{
        color:#ffffff;
        background:#ea0000;
}
.Nav li table {
        display:none;
        border-collapse:collapse; 
}
.Nav li:hover table, .Nav a:hover table {
        display:block;
        position:absolute;
        top:18px;
        left:0;
        background:#ea0000;
}
.Nav li:hover table a, .Nav a:hover table a {
        float:none;
        background:#f2f2f2;
        color:#000;
        width:120px;
        border-bottom:1px solid #fff;
}
.Nav li:hover table a:hover, .Nav a:hover table a:hover {
        background:#565656;
        color:#fff;
}
</style>

<div class=’Nav’>
<li>
        <a href=’#’>产品
        <table><tr><td>
                <a href=’#1’>内容管理系统</a>
                <a href=’#2’>竞争情报系统</a>
        </td></tr></table>
        </a>
</li>
<li>
        <a href=’#’>客户服务
        <table><tr><td>
                <a href=’#1’>技术支持</a>
                <a href=’#2’>留言反馈</a>
                <a href=’#3’>在线帮助</a>
        </td></tr></table>
        </a>
</li>
</div>
上一页 返回目录 下一页