Problem with CSS and drop down menus

[Xarky]

Hi,
I followed this link to design my drop-down menu:
http://msdn.microsoft.com/library/d...ta/html/OfficeFrontPageCreateDropDownMenu.asp

The css file being used is given below.

Now I have made another table (with text) on the same html page,
exactly under this menu. Now when I hover on the main menu items, the
menu item opens its sub items. When the new sub menu opens, the text
for the menu items and for the new table appear on each other and get
mixed up.

Also, when I try to hover on the menu items, as I reach the border of
the new table, menu disappears and so I can't click any options in the
menu.

One possible solution that I was trying was to set the new table
further down, in an area that it cannot be reached by the menu, but in
this way, its not very presentable.

I think problem can be fixed my arranging some properties in the CSS
file, but I can't find what property and the default value to set to
it.

I hope someone understands my problem and can help me out.
Thanks in Advance


/****** CSS FILE *****/
P
{
background-color: lightblue;
font-size: 15pt;
font-weight: bolder;
padding-top: 10px;
margin: 0px;
}

table.navbar {
font-size: 8pt;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;
}

table.menu {
font-size: 13pt;
margin: 0px;
padding: 0px;
font-weight: bold;
}

td.menuNormal {
padding: 0px;
color: Black;
font-weight: bold;
vertical-align: top;
background-color: White;
}

td.menuHover {
padding: 0px;
color: Black;
font-weight: bold;
vertical-align: top;
background-color: White;
position: absolute;
}

div.menuNormal {
display: none;
position: static;
}

div.menuHover {
border: 1px solid lightblue;
background-color: White;
display: inline;
position: absolute;
}

a.menuitem:link {
text-decoration: none;
color: Black;
background-color: White;
display: block;
}

a.menuitem:hover {
text-decoration: none;
color: Black;
background-color: lightblue;
display: block;
}

a.menuitem:active {
text-decoration: none;
color: Black;
background-color: lightblue;
display: block;
}

 

[unruly]

You might wanna give A List Apart a look, they've got a great how-to on
making semantic CSS dropdowns:
http://www.alistapart.com/articles/dropdowns

 

[Xarky]

Hi,
I followed the link you told me, and on it there is a working example
which is given below.
http://www.htmldog.com/articles/suckerfish/bones/

This link is is causing almost the same problem that I have. I don't
know if ont your browser works correctly.

What I require is something similar to the drowp-down menus given in
the codeproject.com, that when onmouseover events fires, the submenu
that appears ovverides any type of data that is found underneath it
and options are clearly visible and can be clearly selected.

Can some more further help be given.
Thanks in Advance.

 

[Nathan]

I dunno, I'm using Firefox, and the dropdowns work just fine, even on
Safari. Seems also to work just fine in MSIE 6.0 on Windows XP.

I checked out that coding site, and the drop down menu's work exactly
like they do on the suckerfish demo that I linked to. So, I dunno if
it's your browser or what.

 

[Xarky]

Hi,
I am using the following.

Microsoft WindowsXP Professional Version 2002 Service Pack 2
Internet Explorer: Version 6.0.2900.2180.xpsp_sp2_rtm.040803-2158

Do I have to fix some settings or what?

Thanks

 

[RobB]

Hi,
I am using the following.

Microsoft WindowsXP Professional Version 2002 Service Pack 2
Internet Explorer: Version 6.0.2900.2180.xpsp_sp2_rtm.040803-2158

Do I have to fix some settings or what?

Thanks

"Nathan" <[email protected]> wrote in message

Please don't top-post.

If there's any way you could go live with this...do it. A working
example that people can examine directly will get you an answer far
more quickly than a series of descriptions (or links to articles on
menu creation). Sounds like a CSS related issue (z-index?) but, it's
not worth spending time on unless there's something to play with...