gpt4 book ai didi

jquery - 被 Div 隐藏的下拉菜单

转载 作者:太空宇宙 更新时间:2023-11-04 04:41:08 25 4
gpt4 key购买 nike

下面是我的 web 应用程序中的 CSS 类

#header {
position:absolute;
left:0px;
top:0px;
background:url(Images/header.png);
background-size:100% 86%;
width:100%;
height:16%;
z-index:200;
}
#centre {
position:absolute;
left:0px;
top:16%;
width:100%;
height:80%;
z-index:101;

}
#smoothmenu1 {
position:absolute;
right:0px;
width:50%;
bottom:0px;
height:26px;
z-index:180;
}

smoothmenu1 div 嵌套在header div 中,smooth menu div 包含一个下拉菜单栏,由于某些原因,在下拉菜单中,菜单项似乎隐藏在中心 div 后面。我正在尝试在 smoothmenu1 div 中添加菜单栏,如此处所示。 http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

以下是HTML部分

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="CSS/ddsmoothmenu.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="JS/ddsmoothmenu.js"> </script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
$(document).ready(function() {
$('#centre').load("initCentre.html");
});
</script>
<style type="text/css">
<!--
#main {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
}
#header {
position:absolute;
left:0px;
top:0px;
background:url(Images/header.png);
background-size:100% 88%;
width:100%;
height:14%;
z-index:250;
}
#centre {
position:absolute;
left:0px;
top:16%;
width:100%;
height:82%;
z-index:300;

}
#smoothmenu1 {
position:absolute;
right:0px;
width:50%;
bottom:0px;
height:26px;
z-index:220;
}
#footer {
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:4%;
z-index:2;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">menu3</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com">menu2</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
<li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com">menu1</a></li>
<li><a href="http://www.dynamicdrive.com/style/">menu3</a></li>
</ul>
<br style="clear: left" />
</div>
</div>
<div id="centre"></div>
</div>

</body>
</html>

最佳答案

您的 #centre 元素具有更高的 z-index - 尝试切换它们。

稍微偏离主题:尝试在可能的情况下不使用 absolute 元素来布置文档。

关于jquery - 被 Div 隐藏的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15450595/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com