纯css的导航菜单

纯css的导航菜单

纯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>

纯css的导航菜单

相关文章:

你感兴趣的文章:

标签云: