Cascading Menu-White Space

[Louth]

I have designed a cascading menu using DIV tags and a stylesheet. However, I am getting some white space when the sub-menus pop-up. Does anybody know why this happens? Could you tell me how to prevent it? Cheers

Aidan

 

[manarth]

can you post a sample of the code? Thanks.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[Louth]

this is the style sheet:

BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
.Bar
{
BORDER: blue 1px outset;
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
FLOAT: left;
WIDTH: 100px;
CURSOR: hand;
LINE-HEIGHT: 20px;
BACKGROUND-COLOR: deepskyblue
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 100px;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: deepskyblue
}
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
FLOAT: right;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: right;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
LINE-HEIGHT: 20px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}

Cheers. If you need the JavaScript or HTML also could you let me know