- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
纯css的导航下拉菜单,您可以先修改部分代码再运行.
<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>