导航栏 下拉菜单 css定位
网站导航栏有下拉菜单，但是下拉菜单出现后会把下面的内容顶下去，这个怎么办？？？求大神
回复讨论(解决方案) 下拉层的css 加上position:absolute;z-index:999;
position:absolute 绝对定位，和上下文无关。
z-index:第几层 ，这个数要保证最大以覆盖其它内容。
下拉层的css 加上position:absolute;z-index:999;
position:absolute 绝对定位，和上下文无关。
z-index:第几层 ，这个数要保证最大以覆盖其它内容。
还是不行呀，我把下拉菜单ul加上
ul{display:none;position:absolute;z-index:999;}
代码发多点。
代码发多点。
.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;
}
首 页 学院简介 学院概况 历届领导 学院领导 办公电话 机构设置 党政管理机构 党务机构 行政机构 教学机构 系所设置 实验室 委员会 师资队伍 教授 副教授 教师名录 博士生导师 硕士生导师 教育工作 学生工作 本科教育 研究生工作 质量工程 学科建设 科学研究 招生就业 合作交流
你不能发多点代码吗?js部分呢。
你不能发多点代码吗?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); } }
javascript我只是在鼠标移动到导航栏时修改了display属性为block
xml/html code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 ……
第一个ul标签我用的position:relative修饰了，然后会不会对他里面的ul标签产生影响
首 页 学院简介 学院概况 历届领导 学院领导 办公电话 机构设置 党政管理机构 党务机构 行政机构 教学机构 系所设置 实验室 委员会 师资队伍 教授 副教授 教师名录 博士生导师 硕士生导师 教育工作 学生工作 本科教育 研究生工作 质量工程 学科建设 科学研究 招生就业 合作交流
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
javascript code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990……
谢谢大神
楼主，还在吗？我也遇到这个问题了，能不能告诉我怎么解决呢？