Heim  >  Artikel  >  Web-Frontend  >  网站导航栏有下拉菜单,但是下拉菜单出现后会把下面的内容顶下去,这个怎么办?求大神_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-21 09:04:554712Durchsuche

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


回复讨论(解决方案)

下拉层的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;
}

<!-- 导航条开始 -->					<div id="navbar">						<ul>							<!-- 首页分类开始 -->							<li class="navbar-float">								<a href="#">首    页</a>							</li>							<li class="navbar-float">								<a href="#" id="navbar-intro">学院简介</a>								<ul>									<li><a href="#">学院概况</a></li>									<li><a href="#">历届领导</a></li>									<li><a href="#">学院领导</a></li>									<li><a href="#">办公电话</a></li>								</ul>							</li>							<!-- 首页分类结束 -->														<!-- 机构设置分类开始 -->							<li class="navbar-float">								<a href="#" id="navbar-organ">机构设置</a>								<ul>									<li><a href="#">党政管理机构</a></li>									<li><a href="#">党务机构</a></li>									<li><a href="#">行政机构</a></li>									<li><a href="#">教学机构</a></li>									<li><a href="#">系所设置</a></li>									<li><a href="#">实验室</a></li>									<li><a href="#">委员会</a></li>								</ul>							</li>							<!-- 机构设置分类结束 -->							<!-- 师资队伍分类开始 -->							<li class="navbar-float">								<a href="#" id="navbar-teachers">师资队伍</a>								<ul>									<li><a href="#">教授</a></li>									<li><a href="#">副教授</a></li>									<li><a href="#">教师名录</a></li>									<li><a href="#">博士生导师</a></li>									<li><a href="#">硕士生导师</a></li>								</ul>							</li>							<!-- 师资队伍分类结束 -->														<!-- 教育工作分类开始 -->							<li class="navbar-float">								<a href="#" id="navbar-edu">教育工作</a>								<ul>									<li><a href="#">学生工作</a></li>									<li><a href="#">本科教育</a></li>									<li><a href="#">研究生工作</a></li>								</ul>							</li>							<!-- 教育工作分类结束 -->							<!-- 质量工程分类开始 -->							<li class="navbar-float"><a href="#">质量工程</a></li>							<!-- 质量工程分类结束 -->							<!-- 学科建设分类开始 -->							<li class="navbar-float"><a href="#">学科建设</a></li>							<!-- 学科建设分类结束 -->							<!-- 科学研究分类开始 -->							<li class="navbar-float"><a href="#">科学研究</a></li>							<!-- 科学研究分类结束 -->							<!-- 招生就业分类开始 -->							<li class="navbar-float"><a href="#">招生就业</a></li>							<!-- 招生就业分类结束 -->							<!-- 合作交流分类开始 -->							<li class="navbar-float" id="navbar-float-last"><a href="#">合作交流</a></li>							<!-- 合作交流分类结束 -->						</ul>					</div>					<!-- 导航条结束 -->

你不能发多点代码吗?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标签产生影响

<!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/html; charset=utf-8" /><head><style type="text/css">.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%;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;position:Relative}.navbar-float a{color:white;}.navbar-float a:hover{ 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;</style> <script type="text/javascript"> 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));	console.log(child[0]);    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);    }	$(navid1).onmouseout = function() {        mouse_out_navmenu(navid1);    }    $(navid2).onmouseover = function() {        mouse_over_navbar(navid2);    }	$(navid2).onmouseout = function() {        mouse_out_navmenu(navid2);    }    $(navid3).onmouseover = function() {        mouse_over_navbar(navid3);    }	$(navid3).onmouseout = function() {        mouse_out_navmenu(navid3);    }    $(navid4).onmouseover = function() {        mouse_over_navbar(navid4);    }	 $(navid4).onmouseout = function() {        mouse_out_navmenu(navid4);    }           }    </script>    </head>      <body><!-- 导航条开始 -->                    <div id="navbar">                        <ul>                            <!-- 首页分类开始 -->                            <li class="navbar-float">                                <a href="#">首    页</a>                            </li>                            <li class="navbar-float">                                <a href="#" id="navbar-intro">学院简介</a>                                <ul>                                    <li><a href="#">学院概况</a></li>                                    <li><a href="#">历届领导</a></li>                                    <li><a href="#">学院领导</a></li>                                    <li><a href="#">办公电话</a></li>                                </ul>                            </li>                            <!-- 首页分类结束 -->                                                         <!-- 机构设置分类开始 -->                            <li class="navbar-float">                                <a href="#" id="navbar-organ">机构设置</a>                                <ul>                                    <li><a href="#">党政管理机构</a></li>                                    <li><a href="#">党务机构</a></li>                                    <li><a href="#">行政机构</a></li>                                    <li><a href="#">教学机构</a></li>                                    <li><a href="#">系所设置</a></li>                                    <li><a href="#">实验室</a></li>                                    <li><a href="#">委员会</a></li>                                </ul>                            </li>                            <!-- 机构设置分类结束 -->                             <!-- 师资队伍分类开始 -->                            <li class="navbar-float">                                <a href="#" id="navbar-teachers">师资队伍</a>                                <ul>                                    <li><a href="#">教授</a></li>                                    <li><a href="#">副教授</a></li>                                    <li><a href="#">教师名录</a></li>                                    <li><a href="#">博士生导师</a></li>                                    <li><a href="#">硕士生导师</a></li>                                </ul>                            </li>                            <!-- 师资队伍分类结束 -->                                                         <!-- 教育工作分类开始 -->                            <li class="navbar-float">                                <a href="#" id="navbar-edu">教育工作</a>                                <ul>                                    <li><a href="#">学生工作</a></li>                                    <li><a href="#">本科教育</a></li>                                    <li><a href="#">研究生工作</a></li>                                </ul>                            </li>                            <!-- 教育工作分类结束 -->                            <!-- 质量工程分类开始 -->                            <li class="navbar-float"><a href="#">质量工程</a></li>                            <!-- 质量工程分类结束 -->                            <!-- 学科建设分类开始 -->                            <li class="navbar-float"><a href="#">学科建设</a></li>                            <!-- 学科建设分类结束 -->                            <!-- 科学研究分类开始 -->                            <li class="navbar-float"><a href="#">科学研究</a></li>                            <!-- 科学研究分类结束 -->                            <!-- 招生就业分类开始 -->                            <li class="navbar-float"><a href="#">招生就业</a></li>                            <!-- 招生就业分类结束 -->                            <!-- 合作交流分类开始 -->                            <li class="navbar-float" id="navbar-float-last"><a href="#">合作交流</a></li>                            <!-- 合作交流分类结束 -->                        </ul>                    </div>                    <!-- 导航条结束 -->						<br>abcde					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123					<br>123123123   </body></html>

JavaScript code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990……


谢谢大神

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

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

谢谢!

QQ:2825523171@qq.com

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn