0
隱藏下拉菜單下面是在我的web應用程序中的CSS類由一個DIV
#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;
}
smoothmenu1div嵌套在頭div，順利菜單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>
由於Z-index會發生一般重疊。嘗試調整smoothmenu的z-index。 – 2013-03-16 14:46:47
請提供你的html如果有的話 – 2013-03-16 15:30:05
我已經添加了我的代碼的HTML部分 – 2013-03-16 16:45:03