纯CSS的下拉菜单 支持IE6 IE7 Firefox

最新推荐文章于 2024-09-01 14:32:59 发布
最新推荐文章于 2024-09-01 14:32:59 发布
阅读量446 收藏 1
点赞数
文章标签： ie css 正则表达式 firefox border ajax

纯CSS的下拉菜单 支持IE6 IE7 Firefox

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    <!-- www.div-css.com 网站标准化  2007-4-16 -->

    <head>

    <meta
    http-equiv="Content-Type"
    c
    />

    <title>纯CSS的下拉菜单 支持IE6 IE7 Firefox -- www.div-css.com 网站标准化</title>


    <style
    type="text/css">
    *{margin:0;padding:0;}    .menu{font-size:12px;position:relative;z-index:100;}    .menu ul{list-style:none;}    .menu li {float:left;position:relative;}    .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}    .menu table {position:absolute; top:0; left:0;}    .menu ul li:hover ul,    .menu ul a:hover ul{visibility:visible;}    .menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}    .menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}    .menu ul ul{}    .menu ul ul li {clear:both;text-align:left;font-size:12px;}    .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}    .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}   
    </style>

    </head>


    <body>


    <div
    class="menu">

    <ul>

    <li><a
    href="">XHTML/CSS   
    <!--[if IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>

    <li><a
    href="">标准</a></li>

    <li><a
    href="">教程</a></li>

    <li><a
    href="">技术文章</a></li>

    <li><a
    href="">常见问题</a></li>

    <li><a
    href="">布局教程专题</a></li>

    <li><a
    href="">CSS菜单</a></li>

    <li><a
    href="">浏览器兼容</a></li>

    <li><a
    href="">滚动条相关</a></li>

    <li><a
    href="">圆角矩形专题</a></li>

    <li><a
    href="">CSS特效欣赏专题</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li><a
    href="">AJAX   
    <!--[if IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>

    <li><a
    href="">AJAX教程</a></li>

    <li><a
    href="">AJAX技术</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li><a
    href="">Javascript   
    <!--[if IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>

    <li><a
    href="">JSON</a></li>

    <li><a
    href="">技术文章</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li><a
    href="">DOM</a></li>

    <li><a
    href="">XML</a></li>

    <li><a
    href="">正则表达式   
    <!--[if IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>

    <li><a
    href="">正则表达式简介</a></li>

    <li><a
    href="">正则表达式之道</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    <li><a
    href="">网站优化</a></li>

    <li><a
    href="">电脑网络</a></li>

    <li><a
    href="">建站技术   
    <!--[if IE 7]><!--></a><!--<![endif]-->

    <!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul>

    <li><a
    href="">PHP</a></li>

    <li><a
    href="">ASP</a></li>

    <li><a
    href="">ASP.NET</a></li>

    <li><a
    href="">JSP</a></li>

    <li><a
    href="">SQL</a></li>

    <li><a
    href="">Flash</a></li>

    <li><a
    href="">Dreamweaver</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>

    </ul>

    </div>


    <br
    /><br
    />

    <a
    href="http://www.div-css.com"
    target="_blank"> www.div-css.com 网站标准化  2007-4-16</a>
    css drop down menu   
    </body>

  • </html>
 
gzblog
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
支持IE6 IE7 Firefox 的纯CSS的下拉菜单
10-30
然而，实现一个兼容多种浏览器的纯CSS下拉菜单，在过去一直是一个挑战，尤其是当需要支持老旧的浏览器，如Internet Explorer 6和7以及较早版本的Firefox时。但是，我们今天要讨论的下拉菜单，是完全使用CSS实现的，...
纯CSS制作支持IE6、IE7、Firefox的下拉菜单特效代码
03-20
总的来说，创建一个兼容IE6、IE7和Firefox的纯CSS下拉菜单特效涉及到一系列的CSS技术，包括布局、定位、伪类选择器以及对不同浏览器特性的理解。这不仅是一项技术挑战，也是对前端开发者耐心和解决问题能力的考验。...
纯CSS的下拉菜单 支持IE6 IE7 Firefox,学习用
alian_1126的专栏
01-18 680
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /
一款纯CSS的下拉菜单 支持IE6 IE7 Firefox
02-27 126
点击(此处)折叠或打开 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"...
CSS的下拉菜单 支持IE6 IE7 Firefox
ZOLO 的专栏
09-27 793
                     CSS的下拉菜单 支持IE6 IE7 Firefox                *{margin:0;padding:0;}     .menu{font-size:12px;position:relative;z-index:100;}     .menu ul{list-style:none;}     .menu li {float:left;p
纯CSS制作支持IE6、IE7、Firefox的下拉菜单
Tsurasa的专栏
08-04 732
纯CSS的下拉菜单 支持IE6 IE7 Firefox*{margin:0;padding:0;}.menu{font-size:12px;position:relative;z-index:100;}.menu ul{list-style:none;}.menu li {float:left;position:relative;}.menu ul ul {visibility:hidden;po
html div遮住下拉菜单,漂亮实用的div+css实现的下拉菜单 已通过IE、firefox测试
weixin_42323064的博客
06-03 469
html里使用select控件，非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，div+css实现的下拉菜单便大量被网页设计师使用。通过div+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。本文给大家推荐一个非常漂亮的div+css实现的下拉...
纯div+css下拉菜单支持ie6，ie7、火狐
06-01
首先，我们来看"纯CSS制作支持IE6、IE7、Firefox的下拉菜单.htm"这个文件。这个文件展示了如何在不同浏览器，特别是老版本的Internet Explorer（如IE6和IE7）和Firefox中实现一致的下拉效果。IE6和IE7对CSS的支持...
纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar
07-04
本资源"纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar"提供了一种使用纯CSS实现的跨浏览器下拉菜单解决方案，特别兼容了对老旧浏览器如Internet Explorer 6和7的支持，同时也适用于Firefox等现代浏览器。...
纯CSS的下拉菜单,支持IE6,IE7,Firefox
10-16
通过以上步骤，我们可以创建一个兼容IE6、IE7和Firefox的纯CSS下拉菜单。尽管IE6和IE7的兼容性限制了部分CSS3特性的使用，但仍然可以通过一些技巧来实现类似的效果，确保了在旧版浏览器中的良好表现。在实际项目中，...
CSS中禁用DOM事件
bingmoujs的博客
08-26 896
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
【CSS】选择器
isun1的博客
08-29 990
CSS 简介+选择器详细知识点
relation-graph实现图谱功能
qq_38599266的博客
08-29 183
【代码】relation-graph实现图谱功能。
CSS学习
2301_77205900的博客
08-28 845
CSS全称Cascading Style Sheets一种样式表语言，为html标签修饰定义外观，分工不同CSS与HTML关系html是网页的内容css是网页的样式（结构）
理解调试和组织 CSS——WEB开发系列26
最新发布
一条晒干的咸鱼的博客
09-01 855
CSS（层叠样式表）不仅是为网页提供样式的关键工具，也是调试和优化网页表现的重要部分。无论是调整网页布局，还是确保样式的一致性，掌握调试和组织 CSS 的技巧都是至关重要的。
Nuxt 项目实战 - 15：自定义unocss规则，让编写样式更高效
Potter：I am not for learning and learning, but for study and work
08-28 414
看到这个你发现问题了，由于我们颜色变量引用的是16进制颜色值，然后rgba的参数是4个，而且是用逗号隔开。可能你会想编译后改样式，类似webpack的css loader一样，但是我们会失去unocss的提示，在开发的时候还是很不方便。如果你有兴趣，欢迎加入你的加入，一起完善这个工具。，可以帮你一键将markdown发布至多平台，方便大家更好的传播知识和分享你的经验。说明：你可能会想到改unocss的规则，那么我们来试下。完美实现我们想要的效果，这样就可以更开心的写样式了。最近我开源了一个文章助手。
纯CSS实现的三级下拉菜单代码示例
这个资源提供了一个纯CSS实现的三级下拉菜单的代码示例，适用于非IE浏览器（如Firefox, Chrome, Safari等）。下面将详细解释这段代码的工作原理和关键CSS样式。 首先，我们看到HTML结构，主要由`<ul>`和`<li>`元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值