热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

网站导航栏有下拉菜单,但是下拉菜单出现后会把下面的内容顶下去,这个怎么办???求大神

网站导航栏有下拉菜单,但是下拉菜单出现后会把下面的内容顶下去,这个怎么办???求大神
网站导航栏有下拉菜单,但是下拉菜单出现后会把下面的内容顶下去,这个怎么办???求大神

13 个解决方案

#1


下拉层的css 加上position:absolute;z-index:999;

position:absolute 绝对定位,和上下文无关。

z-index:第几层 ,这个数要保证最大以覆盖其它内容。

#2


引用 1 楼 ftiger 的回复:
下拉层的css 加上position:absolute;z-index:999;

position:absolute 绝对定位,和上下文无关。

z-index:第几层 ,这个数要保证最大以覆盖其它内容。

还是不行呀,我把下拉菜单ul加上
ul{display:none;position:absolute;z-index:999;}

#3


代码发多点。

#4


引用 3 楼 ftiger 的回复:
代码发多点。

.navbar-float{list-style-type:none; border-right:1px solid #406b8d; line-height:36px;}
#navbar-float-last{border:0px solid #024e70}
#navbar ul{width: 100%;position:relative;right:1px;}
#navbar{height:36px; filter:alpha(Opacity=130);-moz-opacity:0.5;opacity: 0.8;z-index:100; background:#024e70;}
.navbar-float{float:left; width:95px; text-align:center;}
.navbar-float a{color:white;}
.navbar-float a:hover{position:relative; top:1px;}
.navbar-float ul{display:none;position:absolute;z-index:999;}
.navbar-float ul li{
width:150px;
background-color:#000;
text-align:left;
padding-left:5px;
list-style-type:disc;
list-style-position:inside;
filter:alpha(Opacity=130);
-moz-opacity:0.7;
opacity:0.98; 
z-index:999;
border-left:1px solid #024e70;
border-right:1px solid #024e70;
border-bottom:1px dashed #333;
}

#5







    首    页


    学院简介

    • 学院概况

    • 历届领导

    • 学院领导

    • 办公电话







    机构设置

    • 党政管理机构

    • 党务机构

    • 行政机构

    • 教学机构

    • 系所设置

    • 实验室

    • 委员会







    师资队伍

    • 教授

    • 副教授

    • 教师名录

    • 博士生导师

    • 硕士生导师







    教育工作

    • 学生工作

    • 本科教育

    • 研究生工作





    质量工程


    学科建设


    科学研究


    招生就业


    合作交流



#6


你不能发多点代码吗?js部分呢。

#7


引用 6 楼 ftiger 的回复:
你不能发多点代码吗?js部分呢。


// 通过id获得节点
function $(id){
return document.getElementById(id);
}

// 获取兄弟节点
function brothers(elem) {
var r = [];
var n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
    if ( n.nodeType === 1 && n !== elem ) {
        r.push( n );
    }
}
return r;
}
//----------------------------------
//          导航栏
//----------------------------------

// 鼠标移动到导航栏上
function mouse_over_navbar(id) {

// 获得菜单分类的下一个兄弟节点
var child = brothers($(id));
child[0].style.display = "block";
}

// 鼠标移开导航栏的下拉菜单
function mouse_out_navmenu(id) {
// 获得菜单分类的下一个兄弟节点
var child = brothers($(id));
child[0].style.display = "none";
}

// 鼠标移开导航栏的下拉菜单
function get_menu_node(id) {
// 获得菜单分类的下一个兄弟节点
var child = brothers($(id));
return child[0];
}

function hide_menu(which) {
which.style.display = 'none';
}

// 获得导航栏下拉菜单
// 绑定事件
window.onload = function()
{
// 导航栏有下拉列表的id值
var navid1 = "navbar-intro";
var navid2 = "navbar-organ";
var navid3 = "navbar-teachers";
var navid4 = "navbar-edu";


// 绑定鼠标经过导航栏的事件
$(navid1).onmouseover = function() {
mouse_over_navbar(navid1);
}
$(navid2).onmouseover = function() {
mouse_over_navbar(navid2);
}
$(navid3).onmouseover = function() {
mouse_over_navbar(navid3);
}
$(navid4).onmouseover = function() {
mouse_over_navbar(navid4);
}


}

#8


Javascript我只是在鼠标移动到导航栏时修改了display属性为block

#9




引用 5 楼 luxifa1234 的回复:
XML/HTML code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374                    ……

第一个ul标签我用的position:relative修饰了,然后会不会对他里面的ul标签产生影响

#10









 
    
   
   

                    
                        

                                
                                
                                    首    页
                                
                                
                                    学院简介
                                    

                                          
    • 学院概况

    •                                     
    • 历届领导

    •                                     
    • 学院领导

    •                                     
    • 办公电话

    •                                 

                                
                                
                                 
                                
                                
                                    机构设置
                                    

                                          
    • 党政管理机构

    •                                     
    • 党务机构

    •                                     
    • 行政机构

    •                                     
    • 教学机构

    •                                     
    • 系所设置

    •                                     
    • 实验室

    •                                     
    • 委员会

    •                                 

                                
                                
     
                                
                                
                                    师资队伍
                                    

                                          
    • 教授

    •                                     
    • 副教授

    •                                     
    • 教师名录

    •                                     
    • 博士生导师

    •                                     
    • 硕士生导师

    •                                 

                                
                                
                                 
                                
                                
                                    教育工作
                                    

                                          
    • 学生工作

    •                                     
    • 本科教育

    •                                     
    • 研究生工作

    •                                 

                                
                                
                                
                                质量工程
                                
                                
                                学科建设
                                
                                
                                科学研究
                                
                                
                                招生就业
                                
                                
                                合作交流
                                
                            

                    

                    



abcde

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123

123123123
   

#11


引用 10 楼 ftiger 的回复:
Javascript code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990……

谢谢大神

#12


楼主,还在吗?我也遇到这个问题了,能不能告诉我怎么解决呢?

#13


导航菜单下面的内容是普通图片或文本,可以解决;如果下面的内容是FLASH, 能告诉一下,如何解决?

谢谢!

QQ:2825523171@qq.com

推荐阅读
author-avatar
手机用户2502896697
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有