apDiv2 has to be over header1, menubar and header2 at the same time... and just changing "absolute" to "relative" does work
.html
Code:
<head>
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
/*position:relative;*/
left: 113px;
top: 83px;
width:170px;
height:210px;
z-index:2;
overflow: auto;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="ddlevelsmenu.js">
</script>
</head>
<body>
<div id="apDiv2"><img src="img/logo.png" width="164" height="201" alt="map" />
</div>
<!-- -->
<div class="header1"><img src="img/h1.jpg" alt="header1" />
</div>
<!-- -->
<div id="ddtopmenubar" class="solidblockmenu" width="980">
<ul>
<li><a href="4.html" >Contact</a></li>
<li><a href="4.html">Fourth</a></li>
<li><a href="4.html" >Third</a></li>
<li><a href="4.html" rel="ddsubmenu1">Second</a></li>
<li><a href="4.html">Home</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar")
</script>
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="4.html">1</a></li>
<li><a href="4.html">2</a></li>
<li><a href="4.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>
<!-- -->
<div class="header2"><img src="img/h2.jpg" alt="header2" />
</div>
</body>
style.css
Code:
body
{
width: 980px;
margin: 20px auto;
background-color: #efefef;
font-family: Tahoma, Verdana, Arial;
font-size: 13px;
color: #777;
}
div.header1 {
border:0;
width: 980px;
height: 74px;
}
div.header2
{
border:0;
width: 980px;
height: 210px;
}
/* M E N U */
.solidblockmenu ul{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 980px;
overflow: hidden;
margin-bottom: 1em;
border-width: 1px 0;
background: black url(ddlevelsfiles/blockdefault.png) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: right;
/* float: left; */
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li a.selected{
color: white;
background: transparent url(ddlevelsfiles/blockactive.png) center center repeat-x;
}
/* ######### Drop Down ULs CSS ######### */
.ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Marker List Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
position: relative; /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
}
.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}
.markermenu ul li a{
background: #F2F2F2 url(bulletlist.gif) no-repeat 3px center; /*light gray background*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
color: white;
background-color: black;
}
/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */
.blackwhite li a{
background: white;
}
.blackwhite li a:hover{
background: black;
color: white;
}
New Comer (less than 5 posts)
absolute position problem with logo
Reply With Quote
Bookmarks