`
kenny13
  • 浏览: 44967 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Div下拉菜单被Select挡住的解决办法

    博客分类:
  • DIV
阅读更多
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div下拉菜单被Select挡住的解决办法_dwww.cn</title>
</head><body>
<div style="z-index: 10; position: absolute; width: 100; height: 18; overflow: hidden;"
onmouseover="this.style.height=100;" onmouseout="this.style.height=18;">
<iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;
left: 0; scrolling: no;" frameborder="0" src="about:blank"></iframe>
<div style="background-color: silver;">
下拉菜单<br />
bbbbbbb<br />
ccccccc<br />
ccccccc<br />
ccccccc<br />
ccccccc
</div>
</div>
<select style="width: 200">
<option>test0</option>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<br />
<pre>
Div被Select挡住,是一个比较常见的问题。
有的朋友通过把div的内容放入iframe或object里来解决。
可惜这样会破坏页面的结构,互动性不大好。
这里采用的方法是:
虽说div直接盖不住select
但是div可以盖iframe,而iframe可以盖select,
所以,把一个iframe来当作div的底,
这个div就可以盖住select了.
</pre>
</body></html>
分享到:
评论

相关推荐

    div模拟下拉菜单(select)jquery插件.gz

    在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先,`demo.html`是演示页面,它展示了如何在实际项目中应用这个插件。这个页面会包含一...

    select下拉菜单美化.rar

    本资源"select下拉菜单美化.rar"可能包含了一套用于改善默认select菜单外观的JavaScript库或者CSS样式集,旨在提供更加美观、交互性更强的下拉选择体验。 通常,这种美化方法会涉及到以下几个关键知识点: 1. **...

    div模拟select下拉菜单美化效果

    本篇将深入探讨如何利用`div`元素来实现`select`下拉菜单的美化效果,以及相关的前端技术知识。 一、为什么使用`div`模拟`select`? 1. 自定义样式:`&lt;select&gt;`元素默认的样式在不同浏览器间存在差异,而使用`div`...

    DIV模仿下拉菜单

    在网页设计中,"DIV模仿下拉菜单"是一种常见的交互元素,它利用HTML的`&lt;div&gt;`元素和JavaScript(通常配合jQuery库)来模拟传统的HTML`&lt;select&gt;`下拉菜单的功能,同时提供更加灵活的样式控制和用户体验。下面将详细...

    JS模拟select下拉菜单

    在网页开发中,`&lt;select&gt;`元素用于创建一个下拉菜单,用户可以从预定义的选项中选择一个。然而,有时为了实现更复杂的功能或者更好的视觉效果,开发者可能会选择使用JavaScript来模拟`&lt;select&gt;`下拉菜单。这种方法...

    option挡住div解决方法

    Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 test2 test3 Div被Select挡住,是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来...

    jQuery div仿select下拉选项菜单美化获取html

    jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html

    利用css+div设计的下拉菜单

    在下拉菜单的设计中,div元素常用来创建各个菜单项和下拉列表。 1. **基础结构**:首先,我们需要创建一个包含主菜单项的父级div,每个菜单项都是一个单独的div。例如: ```html &lt;div class="dropdown"&gt; &lt;div ...

    DIV+CSS多级下拉菜单示例

    在这个示例中,`&lt;div&gt;`将被用作各个菜单层级的容器。 CSS则负责定义这些`&lt;div&gt;`元素的外观和行为。通过设置适当的样式,我们可以让菜单项在鼠标悬停时显示下拉子菜单,实现响应式交互效果。CSS的关键属性包括但不...

    4中不同风格的div css下拉菜单

    本文将详细探讨四种不同的div和CSS(层叠样式表)实现的下拉菜单风格,并深入解析其背后的原理和技术要点。 1. **经典下拉菜单** 这种风格是最基础的下拉菜单,通常使用`&lt;ul&gt;`和`&lt;li&gt;`元素构建,配合CSS的`display...

    div模拟select下拉菜单美化效果实例

    在网页设计中,为了提供更好的用户体验和更符合品牌风格的界面,开发者经常会选择用`div`元素来模拟`select`下拉菜单的样式。`select`元素是HTML中内置的表单控件,用于创建下拉列表,但其样式控制有限,难以实现...

    DIV+CSS下拉菜单

    本资源提供了5个独特的`DIV+CSS`下拉菜单示例,这些菜单能够为网站增加交互性和用户体验。下面我们将详细探讨`DIV+CSS`下拉菜单的实现原理、常见技巧及应用。 一、`DIV+CSS`下拉菜单的实现原理 1. 结构层(HTML):...

    二级下拉列表联动 select 网页 html5

    二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用!!!

    div模拟select自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    DIV+CSS下拉菜单,适合参考学习

    4. **层级关系**:利用CSS的`z-index`属性可以调整元素的堆叠顺序,确保下拉菜单出现在其父元素之上,不会被遮挡。 5. **过渡和动画**:为了提升用户体验,我们可以添加CSS3的过渡(`transition`)和动画(`...

    DIV+CSS实现下拉菜单的实现

    使用DIV+CSS技术实现导航栏菜单的制作,鼠标经过每个菜单标题,它的子菜单就会出现。

    div css下拉导航菜单

    在下拉导航菜单中,`&lt;div&gt;`通常被用来创建每个菜单项的容器,包括父级菜单和子级下拉菜单。 CSS在下拉导航菜单的设计中扮演着核心角色。通过设置适当的CSS属性,如`display`、`position`、`z-index`、`hover`等,...

    HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码

    在这个“HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码”中,我们将深入探讨如何利用这些技术实现一个创新的下拉菜单。 首先,HTML5中的`&lt;select&gt;`元素通常用于创建选择列表,但其样式控制有限。为了打破这个...

    div+css各种下拉菜单

    本文将深入探讨如何使用`div`和`css`创建各种下拉菜单。 首先,我们先理解下拉菜单的基本构成。一个简单的下拉菜单通常包括一个触发器(通常是按钮或链接)和隐藏的子菜单项。当用户将鼠标悬停在触发器上时,子菜单...

    下拉菜单div及赋值

    一个简单的下拉菜单通常由`&lt;select&gt;`元素组成,包含一系列的`&lt;option&gt;`元素。然而,为了实现更美观和自定义的外观,我们通常会用div元素来模拟这种行为。例如: ```html &lt;div class="dropdown"&gt; 菜单 &lt;div class=...

Global site tag (gtag.js) - Google Analytics