Problem with CSS and drop down menus

Discussion in 'Javascript' started by Xarky, Mar 29, 2005.

  1. Xarky

    Xarky Guest

    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;
    }
     
    Xarky, Mar 29, 2005
    #1
    1. Advertisements

  2. Xarky

    unruly Guest

    unruly, Mar 29, 2005
    #2
    1. Advertisements

  3. Xarky

    Xarky Guest

    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.
     
    Xarky, Mar 29, 2005
    #3
  4. Xarky

    Nathan Guest

    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.
     
    Nathan, Mar 30, 2005
    #4
  5. Xarky

    Xarky Guest

    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
     
    Xarky, Mar 30, 2005
    #5
  6. Xarky

    RobB Guest

    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...
     
    RobB, Mar 30, 2005
    #6
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.