Okay so this is my page I need help with:
http://www.atlasworldwide.co.nz/trial/index3-navigation-trial.htm


On that page under 'Banner Goes Here' is a Cascading Menu. Now I've centered my page so it's all in the middle...but here's a few problems:

* By making the page center it also makes my text in the drop-down menu center as well. I need to somehow make the text aligned to the left again. If I take out the center code it goes back to being left aligned, but I need the center code in there so the table with the menu in it is in the right place.

Also another thing is my target to iframe doesn't seem to be working...


Here is my css for the cascading menu above:
Any idea how to change the highlight as well - so instead of it highlighting blue I'd like it to just change the text colour to gray and keep the background white as well.

Unless anyone has any other code for the same sort of thing - even a clickable one instead of a hover one would be fantastic. I was using a different hover one but it was driving me crazy as it wasn't always picking up the links to click on them.


CSS. STYLE SHEET CODE

BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: left
}
.Bar
{
BORDER-RIGHT: none;
BORDER-TOP: none;
FLOAT: left;
BORDER-LEFT: none;
WIDTH: 85px;
CURSOR: hand;
TEXT-INDENT: 0px;
BORDER-BOTTOM: none;
POSITION: relative;
BACKGROUND-COLOR: FFFFFF;
TEXT-ALIGN: left
}
.menu
{
BORDER-RIGHT: 000000 1px solid;
BORDER-TOP: 000000 1px solid;
VISIBILITY: hidden;
BORDER-LEFT: 000000 1px solid;
WIDTH: 85px;
LINE-HEIGHT: 100%;
BORDER-BOTTOM: 000000 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: white
}
.menuItem
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: FFFFFF 1px solid
}
.ItemMouseOver
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
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: none;
BORDER-TOP: none;
FLOAT: left;
BORDER-LEFT: none;
WIDTH: 85px;
CURSOR: hand;
TEXT-INDENT: 0px;
BORDER-BOTTOM: none;
POSITION: relative;
BACKGROUND-COLOR: FFFFFF;
TEXT-ALIGN: left
}

instead of putting your whole site in <center> tags, put the body of your site all inside one div which has

margin-left:auto; margin-right:auto;

in its css.

This will center the div on the page.

x

How do I code that??

I've never used div's before until I got this menu.

The URL for the page has changed to here:
http://www.atlasworldwide.co.nz/trial/navigator-trial.htm

I've changed the css file a bit to to this:

BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
.Bar
{
BORDER-RIGHT: none;
BORDER-TOP: none;
FLOAT: left;
BORDER-LEFT: none;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 2px;
BORDER-BOTTOM: none;
POSITION: relative;
BACKGROUND-COLOR: white;
TEXT-ALIGN: left
}
.menu
{
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
VISIBILITY: hidden;
BORDER-LEFT: black 1px solid;
WIDTH: 120px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: black 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: white
}
.menuItem
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
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: none;
BORDER-TOP: none;
FLOAT: left;
BORDER-LEFT: none;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 2px;
BORDER-BOTTOM: none;
POSITION: relative;
BACKGROUND-COLOR: white;
TEXT-ALIGN: left
}


I'm still needing to figure out how to target the links to my iframe - at the moment I have them exactly how they had in their example and just added the iframe target at the end - cmd="URL HERE" target="iframe">


I did change the width's on some of the CSS sheet, but then it made my navigator disappear.

HELP Please :)

Can anyone help at all - please... much appreciated.