PDA

View Full Version : AnyLink CSS Menu Problem



mj83
07-11-2007, 07:55 AM
1) Script Title: AnyLink CSS Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

3) Describe problem:
Hi. The code works fine as a standalone but every time I include the CSS codes for the header, the drop down box background becomes transparent and interferes with the text of the body.

Here's the CSS Code:

#header {
position: absolute;
background-color: #05212f;
width:100%;
height:100px;
}

#header_logo {
width:30%;
background-image:url(images/logo300x100.gif);
background-repeat:no-repeat;
float:left;
border:none;
}

#header_banner {
width:50%;
padding:1.5%;
float:left;
}

.imgbanner {
border:solid #FFFFFF 2px;
}

#header_weather {
width:13%;
float:left;
padding:32px 5px;
}

#navbar {
clear: left;
position:relative;
background-color:#0973a7;
height:40px;
margin:0px;
padding:0px 25px;
}

/* start of navbar style */
.anylinkcss{
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #000000; /* #E9FECB; */
overflow:hidden;
top:0px;
}

.anylinkcss a{
width: 100%;
display:inline;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkcss a:hover{ /*hover background color*/
background-color: black;
color: white;
}
/* end of navbar style */

Here's the HTML:

<div id="header">
<div id="header_logo"><img src="images/logo300x100.gif" /></div>
<div id="header_banner"><img src="images/banner468x60.jpg" class="imgbanner" /></div>
<div id="header_weather">Weather Forecast</div>

<div id="navbar">
Link 1 &nbsp; Link 2 &nbsp; Link 3 &nbsp; Link 4
<br><b><a href="search.htm" onClick="return overlay(this, 'subcontent1')">More Links</a></b>
<div id="anylinkmenu1" class="anylinkcss">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
</div>
<!-- end of navbar -->
</div>
<!-- end of header -->

Any help, please? Thanks!