Chris Overland wrote:
The DHTML menu seems much cleaner in appearance than the CSS model. The DHTML model seems to 'overlap' sub items where the CSS butts up next to. Overall the DHTML gives a cleaner appearance. Can that be duplicated somehow in the CSS approach? With the CSS menu, they're actually touching (sides/top-bottom, etc). Is there a way to leave an intentional space there with CSS or have it overlapping a bit as it does in DHTML?
The DHTML menu seems much cleaner in appearance than the CSS model. The DHTML model seems to 'overlap' sub items where the CSS butts up next to. Overall the DHTML gives a cleaner appearance. Can that be duplicated somehow in the CSS approach? With the CSS menu, they're actually touching (sides/top-bottom, etc). Is there a way to leave an intentional space there with CSS or have it overlapping a bit as it does in DHTML?
You can't have additional space because the mouse needs to be continuously hovering over some portion of the menu. If you tried to move the pointer across a gap between menu items, it would cease to be hovering anything and the sub item you were trying to move the mouse to would vanish as soon as the pointer reached the gap.
You can try overlapping things. The following changes seem to work with sub menus, but I don't know about sub-sub menus or sub-sub-sub menus, etc. As Tom warned, this can have unexpected results.
At about line 62 of the css you have this rule:
ul.menu-menu li li.sfHover ul {
left:120px; /* submenu offest - must match ul width above */
top:0;
}
left:120px; /* submenu offest - must match ul width above */
top:0;
}
You can try reducing the left value and increasing the top value:
ul.menu-menu li li.sfHover ul {
left:115px; /* submenu offest - must match ul width above */
top:5px;
}
left:115px; /* submenu offest - must match ul width above */
top:5px;
}