没有Javascript,纯CSS下拉菜单-IE,FF

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量34 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/MaxIE/archive/2006/05/23/407540.html
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ELEMENT a (#PCDATA | table)* > ]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>纯CSS下拉菜单，兼容IE和FF</title>

<style type="text/css">
body {color:#fff;}
#wrapper {color:#000;}
.red {color:#c00;}
#info {margin-top:20px;}
#info h1 {font-size:3em; text-align:center; font-family: georgia, "times new roman", serif;}

#head {height:145px; border:0;}

#positioner {clear:both; position:relative; left:1px; z-index:100;}
#ads {position:relative; z-index:10;}
.menu {display:none;}
#noniemenu {position:absolute;}

#noniemenu .holder ul {padding:0; margin:0;}
#noniemenu .holder ul li {list-style-type: none;}
#noniemenu .holder li {}
#noniemenu .holder li ul {display: none;}
#noniemenu .holder li:hover > ul#a3 {display:block; position:absolute; left:105px; margin-top:-20px; border:1px solid #000;}
#noniemenu .holder .bold {font-weight:bold;}

#noniemenu .holder {
 color:#fff;
 width:104px;
 height:18px;
 display:block;
 overflow:hidden;
 float:left;
 border:1px solid #000;
 margin-right:1px;
 font-size:10px;
 }
#noniemenu .holder:hover {
 height:auto;
 }
#noniemenu a.outer, #noniemenu a.outer:visited {
 color:#fff;
 width:104px;
 line-height:18px;
 display:block;
 background:#e09222;
 text-align:center;
 text-decoration:none;
 font-family: verdana, arial, sans-serif;
 }
#noniemenu a.outer:hover {
 background:#697210;
 overflow:visible;
 }
#noniemenu div.open {display:none;}
#noniemenu a.inner, #noniemenu a.inner:visited {
 display:block;
 width:104px;
 height:18px;
 line-height:18px;
 border-bottom:1px solid #000;
 text-decoration:none;
 color:#000;
 background:#eee;
 text-align:center;
 }
#noniemenu a.second {font-weight:bold;}
#noniemenu a.inner:hover {
 background:#add;
 }
</style>

<!--[if lte IE 6]>
<style type="text/css">
body {margin-top:-8px;}
#head {height:147px;}
#noniemenu {display:none;}
.menu {display:block; position:absolute;}
.menu a.outer, .menu a.outer:visited {
 color:#fff;
 width:104px;
 height:18px;
 display:block;
 background:#e09222;
 border:1px solid #000;
 margin-right:1px;
 text-align:center;
 float:left;
 text-decoration:none;
 font-family: verdana, arial, sans-serif;
 font-size:10px;
 line-height:18px;
 overflow:hidden;

 }
.menu a.outer:hover {
 background:#697210;
 overflow:visible;
 }
.menu a.outer:hover table.first {
 display:block;
 background:#eee;
 border-collapse:collapse;
 }
.menu a.inner, .menu a.inner:visited {
 display:block;
 width:102px;
 height:18px;
 border-bottom:1px solid #000;
 text-decoration:none;
 color:#000;
 font-family: verdana, arial, sans-serif;
 font-size:10px;
 text-align:center;
 }
.menu a.inner:hover {
 background:#add;
 }

.menu a.outer table.first a.second {
 height:18px;
 line-height:18px;
 overflow:hidden;
 font-weight:bold;
 }
.menu a.outer table.first a.second:hover {
 position:relative;
 overflow:visible;
 }
.menu a.outer table.first a.second:hover table {
 position:absolute;
 top:-2px;
 left:102px;
 border-collapse:collapse;
 background:#eee;
 border:1px solid #000;
 font-weight:normal
}
</style>
<![endif]-->

<!--[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<![endif]-->

</head>

<body>

<div id="wrapper">

<div id="head">

<div id="positioner">

<div class="menu">
<a class="outer" href="../menu/index.html">DEMOS
<table class="first"><tr><td>
<a class="inner" href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a>
<a class="inner" href="../menu/embed.html" title="Wrapping text around images">wrapping text</a>
<a class="inner" href="../menu/form.html" title="Styling forms">styled form</a>
<a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a>
<a class="inner second" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<a class="inner" href="../menu/form.html" title="Styling forms">styled form</a>
<a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a>
<a class="inner" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a>
</td></tr></table>
</a>
<a class="inner" href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a>
<a class="inner" href="../menu/old_master.html" title="Image Map for detailed information">image map</a>
<a class="inner" href="../menu/bodies.html" title="fun with background images">fun backgrounds</a>
<a class="inner" href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a>
<a class="inner" href="../menu/em_images.html" title="em size images compared">em sized images</a>
</td></tr></table>
</a>

<a class="outer" href="index.html">MENUS
<table class="first"><tr><td>
<a class="inner" href="spies.html" title="a coded list of spies">spies menu</a>
<a class="inner" href="vertical.html" title="a horizontal vertical menu">vertical menu</a>
<a class="inner" href="expand.html" title="an enlarging unordered list">enlarging list</a>
<a class="inner" href="enlarge.html" title="an unordered list with link images">link images</a>
<a class="inner" href="cross.html" title="non-rectangular links">non-rectangular</a>
<a class="inner" href="jigsaw.html" title="jigsaw links">jigsaw links</a>
<a class="inner" href="circles.html" title="circular links">circular links</a>
</td></tr></table>
</a>

<a class="outer" href="../layouts/index.html">LAYOUTS
<table class="first"><tr><td>
<a class="inner" href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a>
<a class="inner" href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a>
<a class="inner" href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a>
<a class="inner" href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a>
<a class="inner" href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a>
</td></tr></table>
</a>

<a class="outer" href="../boxes/index.html">BOXES
<table class="first"><tr><td>
<a class="inner" href="../boxes/scrollbars.html" title="Left scroll bars">left scroll</a>
<a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a>
<a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy borders</a>
<a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a>
<a class="inner" href="../boxes/outside.html" title="Percentage PLUS pixels">% PLUS pixels</a>
<a class="inner" href="../boxes/minwidth.html" title="min-width for IE">IE min-width</a>
<a class="inner" href="../boxes/minheight.html" title="min-height for IE">IE min-height</a>
</td></tr></table>
</a>

<a class="outer" href="../mozilla/index.html">MOZILLA
<table class="first"><tr><td>
<a class="inner" href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a>
<a class="inner" href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a>
<a class="inner" href="../mozilla/content.html" title="Using contentquot;>contentlt;/a>
<a class="inner" href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a>
<a class="inner" href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a>
<a class="inner" href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a>
<a class="inner" href="../mozilla/target.html" title="Target Practise">target practise</a>
<a class="inner" href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a>
<a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a>
</td></tr></table>
</a>

<a class="outer" href="../ie/index.html">EXPLORER
<table class="first"><tr><td>
<a class="inner" href="../ie/exampleone.html" title="Example one">example one</a>
<a class="inner" href="../ie/weft.html" title="Weft fonts">weft fonts</a>
<a class="inner" href="../ie/exampletwo.html" title="Vertical align">vertical align</a>
</td></tr></table>
</a>

<a class="outer" href="../opacty/index.html">OPACITY
<table class="first"><tr><td>
<a class="inner" href="../opacty/colours.html" title="colour wheel">opaque colours</a>
<a class="inner" href="../opacty/picturemenu.html" title="a menu using opacity">opaque menu</a>
<a class="inner" href="../opacty/png.html" title="partial opacity">partial opacity</a>
<a class="inner" href="../opacty/png2.html" title="partial opacity II">partial opacity II</a>
</td></tr></table>
</a>

</div>

<div id="noniemenu">
<div class="holder">
<ul>
<li><a class="outer" href="../menu/index.html">DEMOS</a></li>
<li><a class="inner" href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="inner" href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="inner second" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<ul id="a3">
<li><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="inner" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
</li>
<li><a class="inner" href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a class="inner" href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a class="inner" href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a class="inner" href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a class="inner" href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="index.html">MENUS</a></li>
<li><a class="inner" href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a class="inner" href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a class="inner" href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a class="inner" href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a class="inner" href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a class="inner" href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a class="inner" href="circles.html" title="circular links">circular links</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../layouts/index.html">LAYOUTS</a></li>
<li><a class="inner" href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a class="inner" href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a class="inner" href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a class="inner" href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a class="inner" href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../boxes/index.html">BOXES</a></li>
<li><a class="inner" href="../boxes/scrollbars.html" title="Left scroll bars">left scroll</a></li>
<li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a></li>
<li><a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy borders</a></li>
<li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a></li>
<li><a class="inner" href="../boxes/outside.html" title="Percentage PLUS pixels">% PLUS pixels</a></li>
<li><a class="inner" href="../boxes/minwidth.html" title="min-width for IE">IE min-width</a></li>
<li><a class="inner" href="../boxes/minheight.html" title="min-height for IE">IE min-height</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../mozilla/index.html">MOZILLA</a></li>
<li><a class="inner" href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a class="inner" href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a class="inner" href="../mozilla/content.html" title="Using contentquot;>contentlt;/a></li>
<li><a class="inner" href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a class="inner" href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a class="inner" href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a class="inner" href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a class="inner" href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../ie/index.html">EXPLORER</a></li>
<li><a class="inner" href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a class="inner" href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a class="inner" href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
</div>

<div class="holder">
<ul>
<li><a class="outer" href="../opacty/index.html">OPACITY</a></li>
<li><a class="inner" href="../opacty/colours.html" title="colour wheel">opaque colours</a></li>
<li><a class="inner" href="../opacty/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a class="inner" href="../opacty/png.html" title="partial opacity">partial opacity</a></li>
<li><a class="inner" href="../opacty/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>
</div>
</div>

</div>
</div> <!-- end of head -->

<div id="info">
<h2>DROP DOWN FUN</h2>

<h1>NO JAVASCRIPT</h1>
<h1>JUST CSS!!!</h1>
<h1 class="red">NOW WITH CASCADE</h1>

</div>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/MaxIE/archive/2006/05/23/407540.html

weixin_34342992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS横向下拉菜单(兼容IE6)
12-13
CSS驱动的横向下拉菜单（改进版） 由于我的IE是IE7的，所以起初没有意识到那个下拉菜单在IE6中不能显示，今天刚把IE7卸了装了IE6，一般的，由于CSS驱动的下拉菜单不能在IE6中正常工作，大多数人会选择用JavaScript去...
不使用js实现下拉菜单
Great_Expectation的博客
03-09 435
html部分：                  Delete post      Update post             css段： .menu-list{display: none;} .text-menu:hover .menu-list{display:block;}
分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏
HuLuWa1997的博客
11-21 4254
一、html/css实现下拉菜单的显示和隐藏 简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏 具体代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
利用JavaScript实现下拉菜单
勤能补拙
01-14 6290
实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。 CSS： * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; } #list { width: 300px; margin: 50px; fon...
纯css下拉菜单详解
song_zheng的专栏
05-18 1777
一级菜单 二级菜单 二级菜单 二级菜单 一级菜单 二级菜单 二级菜单 二级菜单 下拉菜单由于实用，所以受到人们的欢迎。下拉菜单通常是由 javascript 来实现的，也应该由 javascript 来实现，因为这属于行为层范围。然而大家知道，使用 CSS 的
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
首先给大家展示下效果图： 查看效果 源码下载 html代码部分： 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...<...
下拉菜单实用程序-使用Javascript，CSS和DOM
04-01
一个Javascript实用程序，可帮助程序员轻松创建下拉菜单
JavaScript简单下拉菜单实例代码
10-23
主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 638
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 734
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 23
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 876
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1203
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 206
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 143
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 402
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1451
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
redux快速入门
qq_73270720的博客
04-29 248
简单的加减案例,学会redux快速入门
用javascript+css制作下拉菜单
06-28
下拉菜单是一种常见的网页菜单形式，可以通过JavaScript和CSS来制作。具体步骤如下： 1. HTML结构：在HTML中创建一个包含下拉菜单的容器，如下所示： ``` 下拉菜单 <div class="dropdown-content"> 菜单项1 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值