Jodarecode
05-22-2008, 05:10 PM
1) Script Title:
AnyLink Drop Down Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
3) Describe problem:
It drops down directly under the <a href> tag but I need to position it about 20px to the left as not to cover up the other <a href> menues below it since its z-indexed above them. that way when I roll over each one, I dont have to exit the div to see the next menu. this application must be vertical.
Currently:
hoveroverthislink
whatever 1
whatever 2
whatever 3
whatever 4
What I want:
hoveroverthislink
whatever 1
whatever 2
whatever 3
whatever 4
<style type="text/css">
#dropmenudiv{
position:absolute;
I've tried adding left: 20px; "does not work!!"
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>
AnyLink Drop Down Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
3) Describe problem:
It drops down directly under the <a href> tag but I need to position it about 20px to the left as not to cover up the other <a href> menues below it since its z-indexed above them. that way when I roll over each one, I dont have to exit the div to see the next menu. this application must be vertical.
Currently:
hoveroverthislink
whatever 1
whatever 2
whatever 3
whatever 4
What I want:
hoveroverthislink
whatever 1
whatever 2
whatever 3
whatever 4
<style type="text/css">
#dropmenudiv{
position:absolute;
I've tried adding left: 20px; "does not work!!"
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>