PDA

View Full Version : AnyLink CSS Menu - Menu Overlaps Anchor Text



vlane95678
10-31-2012, 05:16 PM
1) Script Title: AnyLink CSS Menu

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

3) Describe problem: I've used this menu script lots of times, however this time I am using text as the navigation instead of an image. When I mouseover the text that is suppose to have the menu, the menu does appear however it is a bit on top of the text, hiding it slightly. Is there a way to add padding between the anchor text and the menu? I would like the menu to appear about 5px lower.

I've searched these forums and added:

.menuanchorclass {
display: inline-block;
}

But that did not solve my issue.

Beverleyh
10-31-2012, 07:02 PM
You'll need to post a link to your page so we can see what's happening

vlane95678
10-31-2012, 07:12 PM
Unfortunately I cannot because the page content is confidential. I have posted a screen shot with the issue demonstrated.4819

bernie1227
10-31-2012, 07:16 PM
position: relative;
top: 5px;

Positioning-wise should move it 5 px down from its current position.

vlane95678
10-31-2012, 07:22 PM
Where exactly should I insert this? anylinkmenus.css then under the .anylinkmenu{ section?

I tried that and it does not work. Also if I change the position from absolute to relative the menu stops working all together.

Note I am not talking about the padding at the top of the menu before it lists the contents...I am talking about the anchor text (which in this case says "SERVICES") and how the menu slightly overlapps the text.

Beverleyh
10-31-2012, 07:30 PM
It's really difficult to offer any further advice without seeing the code/CSS you're working with. You might have other CSS on the page which is conflicting. To workaround your confidentiality issues, can you create a temporary dummy page with the content removed?

vlane95678
10-31-2012, 07:42 PM
Ok I have removed confidential info: REMOVED

The stylesheet for the menu seems to be responding when I make changes, it's just that I cannot figure out how to pad the menu away from the "SERVICES" anchor text.

Even if I take out the other script on the page your solution does not work. Example of it here without any other scripts :REMOVED

bernie1227
10-31-2012, 09:41 PM
Have you tried fiddling with the top value in the css?

vlane95678
10-31-2012, 10:57 PM
I have tried the other person's advice. In anylinkmenu.css I add these:


.anylinkmenu{
position: absolute;
left: 0;
top: 500px;
}

It does nothing. I've seen this fix posted in the past out here on the forums, but I can't find it. Was hoping someone knew how to solve this quickly.

vlane95678
10-31-2012, 11:16 PM
I've found the post to fix this. Hope this helps someone else: http://www.dynamicdrive.com/forums/showthread.php?37660-AnyLink-CSS-Menu-IE-Positional-Problem

inside anylinkcssmenu.js file find this line:

menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})

And add padding like this:

menu.dropmenu.setcss({left:posx+'px', top:posy-10+'px', visibility:'visible'})

See the variable in red? It controls the padding offset from the text.