龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

纯css的导航菜单

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
纯css的导航菜单 没有js,兼容Firefox 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; }

纯css的导航菜单

没有js,兼容Firefox

 


<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>
精彩图集

赞助商链接