只用CSS做的下拉式菜单--A Drop-Down Menu With Only CSS

最近在网上发现了一个只用CSS实现的下拉式菜单(Drop-Down Menu),感觉很新鲜也很酷。于是仔细看了作者的介绍以及源代码,发现核心就是一个":hover"伪类的使用。在CSS1中此伪类仅可用于a对象。且 对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。但IE6及其以下版本都不能很好的支持CSS2,因此 IE6及其以下版本就不能很好的运行这个程序了。所幸Firefox,Netscape,Opera,Safari等浏览器的最新版本均能很好的运行该 程序(其他版本我没试过)。
我在网上找了一下解决该BUG的方法,最终找到一个不是很理想的方法,使用插件---IE7。这个插件能弥补很多IE6在CSS,透明PNG图像显示等方面的缺陷。使用也很简单,下载(44KB)解压后参见里面的README就能搞定。
下面说说我做的一个示例吧,你可以先看一下最终效果。
下面说几个关键的地方:
1、这段代码是为了使该菜单能在IE6及其以下版本的IE浏览器中都能正常工作而写的。导入了IE7这个插件中的ie7-standard-p.js这个 文件。如果你能确保所有看到你的这个菜单的人都使用IE7或者Firefox,Opera,Netscape等浏览器的最新版本的话,那么大可以去掉该行 代码。

<script src="IE7_0_9/ie7-standard-p.js"></script>

2、该行代码是定义子菜单默认状态为隐藏。

#menu ul .item {...}{display:none;}

3、这行是关键代码。它的意思是当ul为hover状态时,显示子菜单。

#menu ul:hover .item{...}{display:block;}

4、这几行代码创建了一个菜单(菜单一),它有三个子菜单。

<DIV id="menu">
<ul id="item1">
<li class="top">菜单一</li>
<li class="item"><a href="#">子菜单一</a></li>
<li class="item"><a href="#">子菜单二</a></li>
<li class="item"><a href="#">子菜单三</a></li>
</ul></div>

时间: 2024-10-27 00:34:58

只用CSS做的下拉式菜单--A Drop-Down Menu With Only CSS的相关文章

DIV下拉式菜单(一)

菜单|下拉 script> var cm=null; document.onclick = new Function("show(null)") function getPos(el,sProp) { var iPos = 0 while (el!=null) { iPos+=el["offset" + sProp] el = el.offsetParent } return iPos } function show(el,m) { if (m) { m.st

用好表单的下拉式菜单

菜单|下拉 用<select>标记可以在表单中方便地插入一个下拉式菜单,以方便用户进行选择,这在制作调查表或用户订单时非常有用,对这种下拉式菜单稍加改造则可以制作出名符其实的下拉式导航菜单. 一.下拉式选择框 这两个示例,外观形式有所不同,但都是用了<select>和<option>标记做出来的,只是设置了不同的参数而已.比较一下它们的源代码,就明白了: 左边的菜单源代码:<select name="select" size="4&q

Java Swing中的下拉式菜单(menu)、弹出式菜单(JPopupMenu)、选项卡窗体(JTabbedPane)组件使用案例_java

菜单是GUI中最常用的组件,菜单不是Component类的子类,不能放置在普通容器中,不受布局管理器的约束,只能放置在菜单栏中. 菜单组件由菜单栏 (MenuBar).菜单(Menu)和菜单项(MenuItem)三部分组成. 一个菜单栏由若干个菜单组成,一个菜单又由若干个菜单项组成.一般菜单栏放 Frame 窗口中,只要调用 Frame 类的 setMenuBar()方法即可. 常用的菜单有:下拉式菜单和弹出式菜单(独立显示,可出现在任意地方). 一:下拉式菜单的创建步骤: 1.创建一个菜单栏.

DIV下拉式菜单(二)

菜单|下拉  你可以把这段程序放在<head></head>标识之间,或是网页的任意位置. 接下来,我们还要定义我们的实际菜单项了,这里我们要给每一个菜单项加上一个鼠标的移动事件(OnMouseOver)句柄,并且让这个事件调用我们上面定义的Show函数.也就是说,当鼠标一进入我们的菜单项中,我们的show函数就开始执行了.这里,我们还要给我们的每个菜单项定义一个ID号,并且把其下拉菜单列的ID名传入Show函数中,这对我们控制下拉菜单列很关键,下面我给出了菜单项的HTML语法描述

请问:下拉式菜单中的选项能否做超链接或怎样做?

面的代码是中国微软的代码,你可以参考着写.<script LANGUAGE="JavaScript"><!--function load(form) {var url = form.list.options[form.list.selectedIndex].value;if (url != "") open(url, "_self");return false;}// --></script><form

纯CSS+Div 经典下拉导航菜单

提示:您可以先修改部分代码再运行 纯CSS+Div 经典导航菜单 Home Single Level Dropdown Dropdown One Dropdown Two Dropdown Three Dropdown Four Dropdown Five Dropline Dropline One Dropline Two Dropline Three Dropline Four Flyout Flyout One Flyout Two Flyout Three Flyout Four Fly

css实现横向下拉导航菜单效果代码

视频 健康 房产 广州 北京 上海 深圳 天津 重庆 武汉 杭州 四川 家居 教育 读书 游戏 彩票 购彩大厅 合买大厅 彩票开奖 走势图 彩票资讯 手机购彩

用CSS 快速定制下拉菜单

css|菜单|下拉 访问过 Microsoft 中文主页的很多人都不会忘记它新奇的下拉式菜单吧. 它的确给我们带来一股清新的网风, 它实现了网页上下拉菜单, 不仅剩去了很多点击的麻烦, 并开创了一个网页设计的未来之路.  我们知道, 通过 CSS 可以确切地定义一个 HTML 元素的样式,包括它的颜色.字体.边框.3D效果.滤镜等等,我们在考虑制作下拉菜单时,首先是想到 CSS 的定位技术,它精确的定位能力可以使我们放心的甚至是在三维空间设置位置和可见性.  CSS 定位使用"position&

CSS+DIV设计实例:纯CSS制作下拉导航菜单

css|菜单|设计|下拉 纯CSS制作的下拉导航菜单-这是一个老外的作品,基本上全是用CSS+HTML写出来的,值得大家学习 以下是引用片段:<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;lis