简单详细的CSS做菜单教程 支持IE6 IE7 IE8 Firefox

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量374 收藏
点赞数
文章标签： ie css border xhtml firefox html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kunzhicheng/article/details/5502517
版权
这篇博客介绍了一种使用CSS创建下拉菜单的方法，适用于IE6、IE7、IE8及Firefox等浏览器。通过CSS样式设置，实现了菜单的显示与隐藏，以及各浏览器的兼容性处理。
摘要由CSDN通过智能技术生成

一直在想用css怎么做下拉菜单，之前看到的下拉菜单都是用js做的，可是又不懂js，今天终于用css研究出来了，大家指教指教。 

下面的代码直接考了就行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单 支持IE6 IE7 IE8 Firefox</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 ul li:hover ul, 
.menu ul a:hover ul{visibility:visible;} 
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;} 
.menu ul ul li {clear:both;text-align:left;font-size:12px;} 
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;} 
</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>
               </li>
          </ul>
</div>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

G633 Padang Light    Spider Cream

之前还想，用css做菜单也会很复杂，看样子也还好，蛮简单说。

前一篇帖子那种做菜单方式虽然简单，可是可看性还是没有css的好

kunzhicheng
关注
下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)
12-12
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...兼容IE6/IE7/IE8/火狐—下拉菜单select样式设置</title>
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
weilanfeng12345的博客
04-27 441
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站，之前一直觉得bootstrap非常好，这次使用了bootstrap3,在chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器下均没有问题，而在IE8及IE11下发现样式无法显示，然后各种百度啊，最后在 雅朋网 的一个网友帖子的帮助下解决了
纯CSS的下拉菜单 支持IE6 IE7 Firefox,学习用
alian_1126的专栏
01-18 688
<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 /
ie8浏览器html圆角问题,css圆角和阴影兼容问题（ie7,ie8）
weixin_35316459的博客
06-10 240
Document.box {background-color: #f0f0f0;width: 740px;height: 40px;border: 1px solid #d7d7d7;-moz-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;behavior: url(ie-css3.htc);}下载地址：ht...
bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
小北哥哥和北妈
04-18 9558
做一个在线系统，PC端也要做，但要兼容千恶的IE8【IE6 是万恶，打死我都不会管IE6】，IE8 是我底线了md， 在IE8下 bottstrap 错乱，变形，不支持一些属性的问题，下面看了一篇 某兄台 借我手弄过来，供大家参考，一般参考第一、第三种方案，基本可以解决兼容问题。。。 让IE6 IE7 IE8 IE9 IE10 IE11支持Boots
ie右边下拉 html,下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)
weixin_35853975的博客
06-03 315
复制代码代码如下:兼容IE6/IE7/IE8/火狐---下拉菜单select样式设置body {background-color:#6C6;}.select_border{width:59px;height:29px;*background:#fff;background:#fff;*border:1px solid #09f;*padding:4px;*height:20px;}.contain...
纯CSS的下拉菜单 支持IE6 IE7 Firefox
不用此栏
05-16 837
>   html>      head>   meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.div-css.com 网站标准化title>     
CSS的下拉菜单 支持IE6 IE7 Firefox
ZOLO 的专栏
09-27 796
                     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 736
纯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
支持IE6 IE7 Firefox 的纯CSS的下拉菜单
10-30
然而，实现一个兼容多种浏览器的纯CSS下拉菜单，在过去一直是一个挑战，尤其是当需要支持老旧的浏览器，如Internet Explorer 6和7以及较早版本的Firefox时。但是，我们今天要讨论的下拉菜单，是完全使用CSS实现的，...
纯CSS制作支持IE6、IE7、Firefox的下拉菜单特效代码
03-20
今天我们将深入探讨一个常见的网页元素——下拉菜单，并学习如何使用纯CSS来创建一个兼容IE6、IE7和Firefox的下拉菜单特效代码。 首先，让我们了解下拉菜单的基本原理。下拉菜单是一种导航元素，它允许用户在一个...
纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar
07-04
本资源"纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar"提供了一种使用纯CSS实现的跨浏览器下拉菜单解决方案，特别兼容了对老旧浏览器如Internet Explorer 6和7的支持，同时也适用于Firefox等现代浏览器。...
纯CSS的下拉菜单,支持IE6,IE7,Firefox
10-16
本篇将深入探讨如何使用纯CSS实现一个兼容IE6、IE7及Firefox的下拉菜单。 一、CSS下拉菜单的基本结构 首先，我们需要创建HTML结构。一个简单的下拉菜单通常由一个`<ul>`元素作为主要菜单容器，每个`<li>`元素表示一...
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的方法
Share
04-10 1588
文章来源：http://www.phperz.com/article/15/0109/45586.html 防止原文章被删，这里也写一下。 本文为大家分享的是一篇让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的方法 ，感兴趣的同学参考下。 bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Tw
CSS画出三角形的做法
mingangel的博客
10-01 400
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 386
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
【CSS】position
最新发布
小秀的博客
10-02 323
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS编码兼容性解决方案：IE6、IE7与Firefox
在网页开发中，尤其是在2000年代中期，Internet Explorer (IE) 的6、7版本以及Firefox (FF) 是主流浏览器，因此对这些浏览器的CSS兼容性处理至关重要。本资源提供了一份专门针对这些浏览器的CSS编码，以解决在不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值