PDA

View Full Version : AnyLink CSS Vertical Menu



jkessler
11-09-2007, 04:49 PM
1) Script Title:
AnyLink CSS Vertical Menu

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

3) Describe problem:
I would like to use this vertical menu script on my page and though I've managed to customize the fonts, spacing, etc. - how can I alter the submenu placement? Right now, it opens ontop of the menu (half on/half off actually) but I would like it to open BESIDE the menu so it doesn't block the text... i.e. if my menu is 150 pixels wide, I would like the submenu to start 150 pixels over...

Thanks

boogyman
11-09-2007, 06:26 PM
div#anylinkmenu0 {
position: relative;
left: 5px;
}

where anylinkmenu0 zero is the submenu number

jkessler
11-09-2007, 06:35 PM
where am i to put this code? in my HTML file or in the CSS file?

boogyman
11-09-2007, 07:12 PM
that is a css style so whereever you keep the CSS Styles for the menu.

g3000
11-09-2007, 08:58 PM
I'm having the exact same issue, but once I use the solution you suggest here, my dropdowns disappear. The culprit seems to be position: relative. The only way I can get the dropdowns to appear again is to use display: inline, but then the relative positioning doesn't work. :mad: Any ideas? Thanks in advance.

jkessler
11-09-2007, 09:03 PM
this is the CSS file... changing the first two items (position and left) does not change the position of the submenu (i've already tried)... what am i missing here? HELP!

.anylinkcss{
position:absolute;
left:150px;
visibility: hidden;
line-height: 18pt;
z-index: 100;
background-color: white;
width: 150px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 18pt;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
left: 150px;
}

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

.anylinkcss a:hover{ /*hover background color*/
background-color: #F8FBBD;
color: black;
}