dropMenuw.htm

最新推荐文章于 2018-07-25 21:40:35 发布
最新推荐文章于 2018-07-25 21:40:35 发布
阅读量619 收藏
点赞数
文章标签： 正则表达式 ie border ajax class xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shixinbao/article/details/1627547
版权

 <!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 --> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>我的页面title</title>
<head> 

 
<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> 
  <style>
.aa{height:2000px;width:40px;background:#eee;}
.bb{width:50px;height:80px;background:red;float:right;
 position:fixed !important; top/**/:0px;
 position:absolute; z-index:100; top:expression(offsetParent.scrollTop+20);right:20px;
</style>

<div class="aa">
 我是不动的。
 <script>for(var i=0;i<99;i++){document.write(i+"<br>");}</script>

 <div class="bb">move</div>

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

shixinbao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯div+css下拉菜单支持ie6，ie7、火狐
06-01
收集的几个纯div+css下拉菜单或是带二级栏目的导航吧，支持ie6、ie7、火狐等浏览器。
完美兼容IE6IE7下拉项导航
11-12
无需JS 兼容IE6 纯CSS的下拉菜单 支持IE6 IE7 Firefox等主流浏览器
纯CSS制作支持IE6、IE7、Firefox的下拉菜单
Tsurasa的专栏
08-04 703
纯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
纯CSS的下拉菜单 支持IE6 IE7 Firefox
涂的专栏
06-18 499
               纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.div-css.com 网站标准化         *    .menu    .menu ul    .menu li     .menu ul ul     .menu table {position:absolute; top:0; left:0;}    .menu ul li:hov
DIV+select美化支持IE6 IE7 火狐（门户搜索）觉得兼容
03-04
DIV+select美化支持IE6 IE7 火狐（门户搜索）觉得兼容 多多支持啊。 偶整理出来滴。共享下。偶米多少积分了。搞点分啊。支持下。。
css中指定下拉列表在firefox中的宽度两种写法
09-25
在firefox火狐浏览器中如何指定下拉列表的宽度，本文提供两种不同的写法，需要了解的朋友可以参考下
IE7 下拉菜单兼容问题及二级菜单 简单Js代码
非专业前端
09-26 618
做二级下拉菜单，在IE7下发现有时鼠标移上去 二级菜单会直接收回，这时候给 二级的加个背景颜色就会解决了！ 贴一下 var $nav=$('.nav').find('li').has('.secNav'); $nav.mouseenter(function(){ $(this).children('.secNav').stop(1,1).show(); }).mousel
纯css多级下拉菜单兼容ie6+主流浏览器
04-28
兼容ie6、ie7、ie8、ie9、Chrome、Firefox等主流浏览器，轻量简洁容易上手使用，是web开发、学习的必备之选。
纯CSS的下拉菜单[兼容 IE6,IE7,FF]
cxz08050924的专栏
07-11 1164
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="Con
制作CSS下拉菜单
weixin_34319111的博客
01-23 91
下拉菜单是很常见的，它们大部分由Javascript实现的，但是比较复杂。利用HTML和CSS也可以制作出下拉菜单，并且不必前者逊色。需要做的就是编写一组无序列表，然后，将它们相互嵌套起来构成菜单的不同级别；接着把嵌套起来的列表包装在一个div中，再为这个div添加一个类，以便将HTML与CSS关联起来。 下面是一个制作二级菜单的过程： 从顶级菜单开始： <bod...
兼容IE6/IE7/IE8/火狐---下拉菜单select高度
yushuir的专栏
07-10 103
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
css下拉菜单制作原理
移动空间678
11-09 5890
css下拉菜单制作原理详解2009-06-24 14:51css下拉菜单制作原理这几天一直研究下拉式菜单的css制作方法，以前没有仔细研究，感觉很难，看不懂，云雾缭绕的，现在发现用css不仅有不错的效果的，而且简单易用！基本原理就是：先把下拉菜单的ul隐藏，再设置主链接的鼠标移过状态#nav li:hover ul   让隐藏的下拉菜单显示出来！页面代码：信息资讯博客影音相册
纯css下拉菜单的制作
weixin_30362083的博客
08-27 97
通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有hover时，一种是鼠标hover时。 主菜单hover时，显示子菜单；主菜单没有hover时，不显示子菜单 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>下拉菜单</title&gt...
解决IE6、IE7、Firefox兼容最简单的CSS Hack
云曦沥雨
11-26 660
很早就在这里看到过解决方案，与嗷嗷讨论后发现这个方案还是很可靠的。当然，唯一的缺点就是每一个属性都要去Hack，但我在很多实践中，只用‘修正’1-2个属性就可以了。 具体写法很容易： #someNode { position: fixed; #position: fixed; _position: fixed; } 第一排给Firefox以及其他浏览器看 第二排给I
ie6实现div在select控件之上
weixin_33812433的博客
08-08 49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <script> ...
css做的下拉菜单兼容ie6 、ie7、火狐
weixin_33690367的博客
11-08 111
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equiv="Co...
简单的自定义select 下拉框，兼容IE
freedomVenly的博客
07-25 2852
IE浏览器下 的select 实在是各种…… 不好看……，可是项目要求至少兼容IE11 ， 为了长得好看些，只能手动去编辑一个类似 select 的存在了， 测试过IE9 以上，有不对的欢迎指出 备忘，直接上代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;me
表单美化-原生javascript和jQuery下拉列表（兼容IE6）
weixin_30900589的博客
10-30 90
效果： 思想：用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="te...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值