Hi All,
Basically, I have a navigational menu with links that can be expanded to show child (or sub) links. Aesthetically, I was wondering if it was possible to have it so that when the link was expanded, the expanded item didn't float out to the right (forming a sort of "tree"). I've attempted to play around with the css, but at most I've been able to move the parent link, which also moved the expanded link to attempt to line it up at the side of the page. What this then did was line the expanded up at the side of the page, but cause the parent to be floating way to far to left, ending up on the outside of the page.
For a reference, I have posted an image of the problem that is occuring when the expanded is simply floating to the right.
http://www.freewebs.com/jrgirard/expandedchildtree.png
(the red lines are to illistrate how it is supposed to be vertically aligned)
Below, is also the css code for the nav menu
ul.menu {
}
ul.menu li.expanded, ul.menu li.collapsed, ul.menu li.leaf {
width: 133px;
height: 54px;
}
ul.menu li a {
display: inline;
}
ul.menu li.expanded {
background-image: url(navtab.png);
background-repeat: no-repeat;
list-style: none;
display: block;
margin-left:-16px;
padding-left:24px;
margin-top:-18px;
}
ul.menu li.leaf {
margin-left:-16px;
padding-left:24px;
margin-top:15px;