兼容多款浏览器的CSS 菜单

最新推荐文章于 2025-04-09 15:22:50 发布

atian15

最新推荐文章于 2025-04-09 15:22:50 发布

阅读量603

点赞数

分类专栏： HTML 文章标签：浏览器 css menu function float border

本文链接：https://blog.youkuaiyun.com/atian15/article/details/4028840

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

【效果】

【代码】

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuDemo1.aspx.cs" Inherits="Demo_Menu_MenuDemo1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>CSS Menu演示</title> <mce:style type="text/css" media="screen"></mce:style><style type="text/css" media="screen" mce_bogus="1"> body { behavior: url("csshover2.htc"); font-size: 12px; font-family: 'verdana' , 'Lucida Sans Unicode' , '宋体' , '新宋体' ,sans-serif; margin: 0 auto; } .pd_menu_01 { float: left; padding: 0; margin: 0; color: #FFFFFF; background: #878787; width: 100%; /*border: solid 1px #C1C1C1; */ clear: both; } /*Color navigation bar normal mode*/.pd_menu_01 a, .pd_menu_01 a:visited { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: bold; font-size: 12px; color: #FFFFFF; background-color: #878787; text-decoration: none; } .pd_menu_01 ul { list-style-type: none; padding: 0; margin: 0; } .pd_menu_01 ul li { float: left; position: relative; z-index: auto !important; z-index: 1000; /*border-right: solid 1px #C1C1C1; border-left: solid 1px #C1C1C1; */ } .pd_menu_01 ul li a { color: #FFFFFF; background-color: #878787; float: none !important; float: left; display: block; height: 30px; line-height: 30px; padding: 0 10px 0 10px; text-decoration: none; } .pd_menu_01 ul li ul { display: none; border: none; color: #FFFFFF; background: #878787; width: 1px; } .pd_menu_01 ul li:hover a { background-color: #666666; text-decoration: none; color: #FFFF00; } /*Color main cells hovering mode*/.pd_menu_01 ul li:hover ul { display: block; position: absolute; z-index: 999; top: 29px; margin-top: 1px; left: 0; } .pd_menu_01 ul li:hover ul li a { display: block; width: 12em; height: auto; line-height: 1.3em; margin-left: -1px; padding: 5px 10px 5px 10px; border-left: solid 1px #C1C1C1; border-bottom: solid 1px #C1C1C1; background-color: #878787; color: #FFFFFF; } /*Color subcells normal mode*/.pd_menu_01 ul li:hover ul li a:hover { background-color: #666666; text-decoration: none; color: #FFFF00; } /*Color subcells hovering mode*/.pd_menu_01 ul li a:hover { background-color: #666666; text-decoration: none; color: #FFFF00; } /*Color main cells hovering mode*/.pd_menu_01 ul li a:hover ul { display: block; width: 12em; position: absolute; z-index: 999; top: 29px; left: 0; } .pd_menu_01 ul li ul li a:visited { background-color: #878787; color: #FFFFFF; } /*Color subcells normal mode*/.pd_menu_01 ul li a:hover ul li a { display: block; width: 12em; height: 1px; line-height: 1.3em; padding: 4px 16px 4px 16px; border-left: solid 1px #C1C1C1; border-bottom: solid 1px #C1C1C1; background-color: #878787; color: #FFFFFF; } .pd_menu_01 ul li a:hover ul li a:hover { background-color: #878787; text-decoration: none; color: #FFFF00; } /*Color subcells hovering mode*/</style> </head> <body> <div class="pd_menu_01 "> <ul> <li><a href="#" mce_href="#">首页</a> </li> </ul> <ul> <li><a href="#" mce_href="#">产品</a> <ul> <li><a href="#" mce_href="#">产品类别</a></li> <li><a href="#" mce_href="#">产品列表</a></li> </ul> </li> </ul> <ul> <li><a href="#" mce_href="#">服务</a> </li> </ul> <ul> <li><a href="#" mce_href="#">关于我们</a> </li> </ul> <ul> <li><a href="#" mce_href="#">联系我们</a> <ul> <li><a href="#" mce_href="#">在线留言</a></li> <li><a href="#" mce_href="#">在线咨询</a></li> </ul> </li> </ul> </div> </body> </html>

html 组件代码（csshover2.htc），可选，主要是用来实现兼容作用的。