网站导航栏有下拉菜单，但是下拉菜单出现后会把下面的内容顶下去，这个怎么办？求大神_html/css_WEB-ITnose
回复讨论(解决方案)
下拉层的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……
谢谢大神
楼主，还在吗？我也遇到这个问题了，能不能告诉我怎么解决呢？
导航菜单下面的内容是普通图片或文本，可以解决；如果下面的内容是FLASH, 能告诉一下，如何解决？
谢谢！
QQ:2825523171@qq.com