幻灯片挡住CSS导航下拉菜单或者飘浮广告的解决方法
作者：佚名
字体：[ ] 来源：互联网 时间：06-23 15:13:17
网页中会用到一些下拉菜单，幻灯片，飘浮广告等。不难发现幻灯片会挡住下拉菜单或者飘浮广告等，解决方法有两种，一是将幻灯片所在DIV 置于最底层，二是将被挡住的DIV、ul、li 置于最高层
网站常会用到一些下拉菜单，幻灯片，飘浮广告等。 但经常会发现。幻灯片会挡住下拉菜单或者飘浮广告等。解决办法有下 第一，可将幻灯片所在DIV 置于最底层。添加CSS如下 style=&z-index:-100;position:& 第二，可将被挡住的DIV/ul/li 置于最高层。添加CSS如下 style=&z-index:9999;position:& 在使用FLASH幻灯的时候，有时还是不行。那便在FLASH代码中添加此行代码。 例如： 代码如下: &object classid="clsid:D27CDB6E-AE6D-11cf-96B8-" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="980" height="290" style="z-index:-100;position:"& &param name="movie" value="&?php echo get_skin_root() ?&indexflash/main.swf" style="z-index:-100;position: /& &param name="quality" value="high" /& &param name="wmode" value="opaque"& &embed src="&?php echo get_skin_root() ?&indexflash/main.swf" quality="high" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="290"&&/embed& &/object&
大家感兴趣的内容
12345678910
最近更新的内容兼容性不错的纯CSS下拉菜单代码 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 17时,
兼容性好的纯CSS下拉菜单，对于美化风格，比较简洁，这个仁者见仁，智者见智了。来源网页：/jscode/
代码片段(1)
1.&[代码][CSS]代码&&&&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&纯CSS下拉菜单 - &/title&
&style type="text/css"&
.navigation {
padding:0;
list-style-type:
font:12px A
.navigation li {
padding:0;
margin:0 10px 0 0;
_margin:0 2px 0 0;
.navigation li dl {
width:150/*ie6*/
padding:0;
background-color:#
border:solid 2px #666;
.navigation li dt a , .navigation li dd a{ display:}
.navigation li dt {
padding: 5
text-align:
background-color:#
font-size: 12
font-weight:
.navigation li dt a ,.navigation
li dt a:visited {
color:#333;
text-decoration:
.navigation li dd {
padding:0;
color: #333;
background-color:#
border-bottom:dotted 1px #666;
.navigation li dd.last {
border-bottom:0;
.navigation li dd a, .navigation
li dd a:visited {
color:#333;
text-decoration:
padding:4px 5px 4px 20
.navigation li dd { display:}
.navigation li:hover dd, .navigation li a:hover dd { display:}
/*ie6 hack*/
.navigation li:hover,.navigation li a:hover { border:0;}
.navigation table { border-collapse:
padding:0;
text-align:
&ul class="navigation"&
&!--[if lte IE 6]&&a href="#"&&table&&tr&&td&&![endif]--&
&dt&&a href="#"&更新总览&/a&&/dt&
&dd&&a href="#"&网站首页&/a&&/dd&
&dd&&a href="http://www.codesc.net"&网页特效&/a&&/dd&
&dd&&a href="#"&素材下载&/a&&/dd&
&dd class="last"&&a href="#"&设计素材&/a&&/dd&
&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&
&!--[if lte IE 6]&&a href="#"&&table&&tr&&td&&![endif]--&
&dt&&a href="#"&Photoshop&/a&&/dt&
&dd&&a href="#"&氏量素材&/a&&/dd&
&dd class="last"&&a href="#"&名片素材&/a&&/dd&
&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&
&!--[if lte IE 6]&&a href="#"&&table&&tr&&td&&![endif]--&
&dt&&a href="#"&网页特效&/a&&/dt&
&dd&&a href="#"&网站菜单&/a&&/dd&
&dd class="last"&&a href="#"&CSS3&/a&&/dd&
&!--[if lte IE 6]&&/td&&/tr&&/table&&/a&&![endif]--&
开源中国-程序员在线工具：
相关的代码(128)
开源从代码分享开始
天涯游子的其它代码网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
纯css下拉菜单 无需js
再来个今天某人说过的例子：纯css下拉菜单：
这个的实现很简单，主要是:hover和过渡属性transition的使用。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&css&/title&
margin: 0;
padding:0;
font-size: 16
font-family: "微软雅黑";
#container{
width: 100
text-align:
#container ul{
list-style:
#container span{
display: inline-
width: 100
height: 30
line-height: 30
#container ul{
height: 0;
width: 100
transition: all 1s;
#container:hover ul{
height: 330
#container ul li{
background: #
margin-top: 3
height: 30
line-height: 30
&div id="container"&
&span&移动&/span&
&li&这里有1&/li&
&li&这里有2&/li&
&li&这里有3&/li&
&li&这里有4&/li&
&li&这里有5&/li&
&li&这里有6&/li&
&li&这里有7&/li&
&li&这里有8&/li&
&li&这里有9&/li&
&li&这里有10&/li&
因为ul是个伸缩对象，所以要让它脱离文档流，不是在实用时会影响到布局，给它一个绝对定位即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]后使用快捷导航没有帐号？
只需一步，快速开始
查看: 5176|回复: 6
用js与css写了一个下拉菜单，鼠标移开上级菜单，后子菜单马上消失，请高手帮着看看
UID129067在线时间 小时积分554帖子离线17339 天注册时间
高级会员, 积分 554, 距离下一级还需 446 积分
用js与css写了一个下拉菜单，鼠标移开后上级菜单后，子菜单马上消失
请查看图片
未命名-1.jpg (19.35 KB, 下载次数: 0)
15:47 上传
(32.61 KB, 下载次数: 72)
15:47 上传
点击文件名下载附件
UID522151在线时间 小时积分2099帖子离线17339 天注册时间
银牌会员, 积分 2099, 距离下一级还需 901 积分
我靠，问题一样啊。
UID500900在线时间 小时积分4965帖子离线17339 天注册时间
金牌会员, 积分 4965, 距离下一级还需 35 积分
你去妙味课堂有提供源码&&这个是站长网 的那个导航
UID558646在线时间 小时积分663帖子离线17339 天注册时间
高级会员, 积分 663, 距离下一级还需 337 积分
#nav .subnav{}
这个top值调上去一点。
UID581190在线时间 小时积分52帖子离线17339 天注册时间
初级会员, 积分 52, 距离下一级还需 148 积分
你把图片进行处理一下就行了
你把图片进行处理一下就行了
17:41 上传
点击文件名下载附件
32.72 KB, 下载次数: 75
你把图片进行处理一下就行了
UID129067在线时间 小时积分554帖子离线17339 天注册时间
高级会员, 积分 554, 距离下一级还需 446 积分
回复 5# wkr136
楼上的方法，不错，简单实用 谢谢
UID380093在线时间 小时积分1246帖子离线17339 天注册时间
完整例子，做了详细注释，希望对你有帮助。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&setTimeout应用&/title&
body,div,ul,li,p{margin:0;padding:0;}
body{font:12px/1.5 A}
ul{list-style-type:}
#nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .subnav,#nav .subnav p,#nav .subnav p span,#nav .subnav .arrow{background:url(http://js.fgm.cc/learn/lesson4/img/nav_bg.png) no-}
#nav{position:width:910background-position:0 -36margin:10}
#nav ul{height:36line-height:36margin-left:10padding-right:10overflow:background-position:right -72}
#nav ul li{float:width:110margin-left:-2background-position:0 -108}
#nav ul li a{font-size:14color:#width:102display:text-align:text-decoration:margin:0 2px 0 4}
#nav ul li a:hover{font-weight:700;background-position:-3px -144}
#nav .subnav{display:position:top:41width:auto!min-width:110height:27line-height:27white-space:background-position:0 -180}
#nav .subnav p{margin-left:10padding-right:10background-position:right -234}
#nav .subnav p span{display:color:#235e99;background-repeat:repeat-x;background-position:0 -207}
#nav .subnav p a{font-size:12display:color:#235e99;text-decoration:margin:0 5padding:0 2}
#nav .subnav p a:hover{font-weight:400;background-image:border-bottom:2}
#nav .subnav .arrow{position:top:-4display:width:11height:5background-position:0 -261}
&script type=&text/javascript&&
var get = {
byId: function(id) {
return document.getElementById(id)
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp(&(^| )& + sClass + &( |$)&);
var aElem = this.byTagName(&*&, oParent);
for (var i = 0; i & aElem. i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
window.onload = function ()
var oNav = get.byId(&nav&);
var aLi = get.byTagName(&li&, oNav);
var aSubNav = get.byClass(&subnav&, oNav);
var oSubNav = oEm = timer =
var i = 0;
for (i = 1; i & aLi. i++)
aLi[i].onmouseover = function ()
//隐藏所有子菜单
for (i = 0; i & aSubNav. i++)aSubNav[i].style.display = &none&;
//获取该项下的子菜单
oSubNav = get.byClass(&subnav&, this)[0];
//获取该项下的指示箭头
oEm = get.byTagName(&em&, this)[0];
//显示该项下的子菜单
oSubNav.style.display = &block&;
//判断显示区域
oNav.offsetWidth - this.offsetLeft & oSubNav.offsetWidth ?
//如果在显示范围居左显示
oSubNav.style.left = this.offsetLeft + &px& :
//超出显示范围居右显示
oSubNav.style.right = 0;
//计算指标箭头显示位置
oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + &px&;
clearTimeout(timer);
//阻止事件冒泡
oSubNav.onmouseover = function (event)
(event || window.event).cancelBubble =
clearTimeout(timer)
aLi[i].onmouseout = function ()
timer = setTimeout(function () {
oSubNav.style.display = &none&
&div id=&nav&&
&li&&a href=&javascript:;&&站长之家&/a&&/li&
&a href=&javascript:;&&行业资讯&/a&
&div class=&subnav&&
&em class=&arrow&&&/em&
&a href=&javascript:;&&业界动态&/a&|
&a href=&javascript:;&&收购融资&/a&|
&a href=&javascript:;&&门户动态&/a&|
&a href=&javascript:;&&搜索引擎&/a&|
&a href=&javascript:;&&网络游戏&/a&|
&a href=&javascript:;&&电子商务&/a&|
&a href=&javascript:;&&广告传媒&/a&|
&a href=&javascript:;&&厂商开发&/a&
&a href=&javascript:;&&站长在线&/a&
&div class=&subnav&&
&em class=&arrow&&&/em&
&a href=&javascript:;&&站长报道&/a&|
&a href=&javascript:;&&好站推荐&/a&|
&a href=&javascript:;&&站长聚会&/a&|
&a href=&javascript:;&&站长访谈&/a&|
&a href=&javascript:;&&站长茶馆&/a&|
&a href=&javascript:;&&网站排行&/a&
&a href=&javascript:;&&网站运营&/a&
&div class=&subnav&&
&em class=&arrow&&&/em&
&a href=&javascript:;&&建站经验&/a&|
&a href=&javascript:;&&策划盈利&/a&|
&a href=&javascript:;&&搜索优化&/a&|
&a href=&javascript:;&&网站推广&/a&|
&a href=&javascript:;&&免费资源&/a&
&a href=&javascript:;&&设计在线&/a&
&div class=&subnav&&
&em class=&arrow&&&/em&
&a href=&javascript:;&&酷站推荐&/a&|
&a href=&javascript:;&&网页设计&/a&|
&a href=&javascript:;&&WEB标准&/a&|
&a href=&javascript:;&&视频处理&/a&|
&a href=&javascript:;&&设计活动&/a&
&a href=&javascript:;&&网络编程&/a&
&div class=&subnav&&
&em class=&arrow&&&/em&
&a href=&javascript:;&&Asp编程&/a&|
&a href=&javascript:;&&Php编程&/a&|
&a href=&javascript:;&&.Net编程&/a&|
&a href=&javascript:;&&Xml编程&/a&|
&a href=&javascript:;&&Access&/a&|
&a href=&javascript:;&&Mssql&/a&|
&a href=&javascript:;&&Mysql&/a&
&a href=&javascript:;&&联盟资讯&/a&
&div class=&subnav&&
&em class=&arrow&&&/em&
&a href=&javascript:;&&联盟动态&/a&|
&a href=&javascript:;&&联盟介绍&/a&|
&a href=&javascript:;&&联盟点评&/a&|
&a href=&javascript:;&&网赚技巧&/a&
&a href=&javascript:;&&服务器&/a&
&div class=&subnav&&
&em class=&arrow&&&/em&
&a href=&javascript:;&&Web服务器&/a&|
&a href=&javascript:;&&Ftp服务器&/a&|
&a href=&javascript:;&&Mail服务器&/a&|
&a href=&javascript:;&&Dns服务器&/a&|
&a href=&javascript:;&&Win服务器&/a&|
&a href=&javascript:;&&Linux服务器&/a&|
&a href=&javascript:;&&安全防护&/a&|
&a href=&javascript:;&&虚拟主机&/a&
&提示：您可以先修改部分代码再运行
Powered by