myyoungfamily
03-29-2006, 04:17 AM
There have been a few posts about a problem with the AnyLink Drop Down Menu http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm not working with templates.
I fixed a problem and hope this will help some people out. For some reason the style sheets have a problem putting the colors over a editable region when using templates.
The fix is to use images instead of colors. I used very small 1px images for the background of the drop down box and for the hover/highlight.
Here is the original code:
<style type="text/css">
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}
</style>
Here is my fixed code:
Take notice of the changes to "#dropmenudiv{" and "#dropmenudiv a{"
<style type="text/css">
#dropmenudiv{
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font:normal 10px/18px Verdana, Arial, Helvetica, sans-serif;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid black;
padding: 1px 0;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: (url-link-to-small-1x1px.jpg);
background-repeat: repeat;
}
#dropmenudiv a:hover{
background-image: (url-link-to-small-1x1px.jpg);
}
</style>
Here are some keywords that hopefully will help people find the solution to this problem:
AnyLink, Any Link, Drop, Down, DropDown, Dissapear, Behind, No Hover, No Highlight, Template, Dreamweaver, Problem, Editable Reigon
I fixed a problem and hope this will help some people out. For some reason the style sheets have a problem putting the colors over a editable region when using templates.
The fix is to use images instead of colors. I used very small 1px images for the background of the drop down box and for the hover/highlight.
Here is the original code:
<style type="text/css">
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}
</style>
Here is my fixed code:
Take notice of the changes to "#dropmenudiv{" and "#dropmenudiv a{"
<style type="text/css">
#dropmenudiv{
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font:normal 10px/18px Verdana, Arial, Helvetica, sans-serif;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid black;
padding: 1px 0;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: (url-link-to-small-1x1px.jpg);
background-repeat: repeat;
}
#dropmenudiv a:hover{
background-image: (url-link-to-small-1x1px.jpg);
}
</style>
Here are some keywords that hopefully will help people find the solution to this problem:
AnyLink, Any Link, Drop, Down, DropDown, Dissapear, Behind, No Hover, No Highlight, Template, Dreamweaver, Problem, Editable Reigon