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. Advertising

  2. Xarky

    unruly Guest

    unruly, Mar 29, 2005
    #2
    1. Advertising

  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.

    "unruly" <> wrote in message news:<>...
    > 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, 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

    "Nathan" <> wrote in message news:<>...
    > 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, Mar 30, 2005
    #5
  6. Xarky

    RobB Guest

    Xarky wrote:
    > 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" <> wrote in message

    news:<>...
    > > 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.


    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. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    804
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,050
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    523
    msimmons
    Jul 16, 2009
  4. dorayme

    Re: CSS drop down menus

    dorayme, Feb 25, 2012, in forum: HTML
    Replies:
    19
    Views:
    759
    Ben Bacarisse
    Mar 5, 2012
  5. Replies:
    5
    Views:
    302
Loading...

Share This Page