AnyLink CSS Menu help please?

[Sara Walker]

<!--1st anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')"><img src="plans.gif" border=0 style="position:absolute; left:158px; top:119px"></a>

<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>

<!--2nd anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')"><img src="domainregister.gif" border=0 style="position:absolute; left:352px; top:119px"></a>

<div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

I had to add a position to the linked pictures, and after that the menus all drop at the coordinates of the first one. Is there any way to fix this? I messed around with it for awhile and got nowhere.

[jscheuer1]

Since AnyLink CSS Menu itself relies upon manipulation of absolute positioning to achieve its effects, you must find an alternate method of positioning your images that are a part of it. Relative positioning could very well work. Ideally, you would want to arrange your page so that the images were simply where you want them without resorting to using their css position property. If you are having trouble doing that:

PLEASE: Include the URL to your problematic webpage that you want help with.

and one of us will have a go at it.

[Sara Walker]

Oops.

andhostingforall.com

There you go. And thanks!

[jscheuer1]

Well, this may not be ideal but, I think you will be able to tweak it from here. The main problem was that the table containing the various images like hosting.gif etc. was constrained in its width by its containing table. This caused the images to wrap. So I closed the containing table and reopened a similar one just beneath these images. I also added some style to get things looking nicer. In short, replace this part of your html:

  <tr>
    <td bgcolor="#C0C0C0" valign="top">
    <table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" bgcolor="#70B4FF">
      <tr>
        <td>

        <!--1st anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')"><img src="hosting.gif" border=0 style="position:absolute; left:157px; top:119px"></a>   
                                                    
<div id="anylinkmenu1" class="anylinkcss" style="width: 150px; background-color: 73B6FF">

<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>

<!--2nd anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')"><img src="support.gif" border=0 style="position:absolute; left:352px; top:119px"></a>   
                                                    
<div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: 73B6FF">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

<!--3rd anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu3')"><img src="about.gif" border=0 style="position:absolute; left:546px; top:119px"></a>   
                                                    
<div id="anylinkmenu3" class="anylinkcss"  style="width: 150px; background-color: 73B6FF">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

<!--4th anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu4')"><img src="forums.gif" border=0 style="position:absolute; left:741px; top:119px"></a>   
                                                    
<div id="anylinkmenu4" class="anylinkcss"  style="width: 150px; background-color: 73B6FF">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

</div>
       </tr>
    </table>
    </td>
  </tr>

with this:

</table>
<style type="text/css">
.menutable img{
margin:-1px;
padding:0;
}
* html .menutable img {
position:relative;
left:4px;
}
.menutable td {
white-space:nowrap;
}
</style>
    <table class="menutable" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bordercolor="#111111" >
      <tr>
        <td>

        <!--1st anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')"><img src="http://andhostingforall.com/hosting.gif" border=0></a>   
                                                    
<div id="anylinkmenu1" class="anylinkcss" style="width: 150px; background-color: 73B6FF">

<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>

<!--2nd anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')"><img src="http://andhostingforall.com/support.gif" border=0></a>   
                                                    
<div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: 73B6FF">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

<!--3rd anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu3')"><img src="http://andhostingforall.com/about.gif" border=0></a>   
                                                    
<div id="anylinkmenu3" class="anylinkcss"  style="width: 150px; background-color: 73B6FF">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

<!--4th anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu4')"><img src="http://andhostingforall.com/forums.gif" border=0></a>   
                                                    
<div id="anylinkmenu4" class="anylinkcss"  style="width: 150px; background-color: 73B6FF">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

</div></td>
       </tr>
    </table>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="780" id="AutoNumber1" bgcolor="#F5FAFE">