Any Link CSS question

[bdmatrix]

Script URL: http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

This is the horizontal menu script.
When hover over a link which is using this script, a menu pops up where the subcategories are lined one below the other.

Is it possible to align the subcategories one beside the other?


So instead of being like this:

{mouse-hover on the link}
|sub1|
|sub2|
|sub3|

I was hoping for something like this:

{mouse-hover on the link}
|sub1||sub2||sub3|

Any help would be greatly appreciated!
Thanks!

[jscheuer1]

Sure, use these styles in anylink.css in place of the ones that come with the menu:


.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #E9FECB;
width: auto;
padding:0 10px;
}

.anylinkcss a{
width: 100%;
text-indent: 3px;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

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

Be sure not to specify a width in the HTML in the body for the anylinkcss class division. This is OK:


<div id="anylinkmenu1" class="anylinkcss">

This is not:


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

If you want dividers between the subs, just hard code them, ex:


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