How do I make my submenu overlap the main menu?

Discussion in 'HTML' started by toxee, Oct 4, 2009.

  1. toxee

    toxee Guest

    http://www.pearldavis.byethost4.com/

    Basicly the main horizontal list overlaps my submenus upon resize. So,
    if I shrink the window some my dropdown list will get hidden somewhat
    behind the main navigation items. I really need help figuring out how
    I can get my dropdown submenus to overlap everything once dropped
    down. Thanks in advance for any help or advice.
     
    toxee, Oct 4, 2009
    #1
    1. Advertising

  2. On Oct 4, 4:39 pm, toxee <> wrote:
    > http://www.pearldavis.byethost4.com/
    >
    > Basicly the main horizontal list overlaps my submenus upon resize. So,
    > if I shrink the window some my dropdown list will get hidden somewhat
    > behind the main navigation items. I really need help figuring out how
    > I can get my dropdown submenus to overlap everything once dropped
    > down. Thanks in advance for any help or advice.


    You can not use

    #menu li{
    position: relative;
    z-index:-1;
    [...] }

    ???
     
    Jan C. Faerber, Oct 4, 2009
    #2
    1. Advertising

  3. toxee

    toxee Guest

    On Oct 4, 9:58 am, "Jan C. Faerber" <> wrote:
    > On Oct 4, 4:39 pm, toxee <> wrote:
    >
    > >http://www.pearldavis.byethost4.com/

    >
    > > Basicly the main horizontal list overlaps my submenus upon resize. So,
    > > if I shrink the window some my dropdown list will get hidden somewhat
    > > behind the main navigation items. I really need help figuring out how
    > > I can get my dropdown submenus to overlap everything once dropped
    > > down. Thanks in advance for any help or advice.

    >
    > You can not use
    >
    > #menu li{
    > position: relative;
    > z-index:-1;
    > [...] }
    >
    > ???


    Well what should I use then? I did tinker with z-index values they
    worked to no avail. I'm not sure what's going wrong here.
     
    toxee, Oct 5, 2009
    #3
  4. toxee

    toxee Guest

    On Oct 4, 7:39 am, toxee <> wrote:
    > http://www.pearldavis.byethost4.com/
    >
    > Basicly the main horizontal list overlaps my submenus upon resize. So,
    > if I shrink the window some my dropdown list will get hidden somewhat
    > behind the main navigation items. I really need help figuring out how
    > I can get my dropdown submenus to overlap everything once dropped
    > down. Thanks in advance for any help or advice.


    Anyone? I'm dying here.
     
    toxee, Oct 5, 2009
    #4
  5. toxee

    John Hosking Guest

    On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:

    > On Oct 4, 9:58 am, "Jan C. Faerber" <> wrote:
    >> On Oct 4, 4:39 pm, toxee <> wrote:
    >>
    >>>http://www.pearldavis.byethost4.com/

    >>
    >>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    >>> if I shrink the window some my dropdown list will get hidden somewhat
    >>> behind the main navigation items


    I don't have to shrink anything to get this to happen. I mostly have four
    menu items in each of two rows. The lower row's menu items obscure the
    submenus of the upper row.

    >>
    >> You can not use
    >>
    >> #menu li{
    >> position: relative;
    >> z-index:-1;
    >> [...] }
    >>
    >> ???

    >
    > Well what should I use then? I did tinker with z-index values they
    > worked to no avail. I'm not sure what's going wrong here.


    Try adding z-index:1; or some larger value to ul.submenu.

    This should (according to my quick little test in FF2) have the effect of
    placing the submenus infront of (on top of) the menu items. (I think that
    was the approach Jan was trying to take, but his suggestion leaves the
    #menu list items hidden behind body or something.)

    --
    John
     
    John Hosking, Oct 5, 2009
    #5
  6. toxee

    toxee Guest

    On Oct 4, 10:04 pm, John Hosking <> wrote:
    > On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    > > On Oct 4, 9:58 am, "Jan C. Faerber" <> wrote:
    > >> On Oct 4, 4:39 pm, toxee <> wrote:

    >
    > >>>http://www.pearldavis.byethost4.com/

    >
    > >>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    > >>> if I shrink the window some my dropdown list will get hidden somewhat
    > >>> behind the main navigation items

    >
    > I don't have to shrink anything to get this to happen. I mostly have four
    > menu items in each of two rows. The lower row's menu items obscure the
    > submenus of the upper row.
    >
    >
    >
    > >> You can not use

    >
    > >> #menu li{
    > >> position: relative;
    > >> z-index:-1;
    > >> [...] }

    >
    > >> ???

    >
    > > Well what should I use then? I did tinker with z-index values they
    > > worked to no avail. I'm not sure what's going wrong here.

    >
    > Try adding z-index:1; or some larger value to ul.submenu.
    >
    > This should (according to my quick little test in FF2) have the effect of
    > placing the submenus infront of (on top of) the menu items. (I think that
    > was the approach Jan was trying to take, but his suggestion leaves the
    > #menu list items hidden behind body or something.)
    >
    > --
    > John


    Hmm, I added the z-index: 1 to the ul submenu and then added the z-
    index: -1 to
    #menu li and now I have no dropdowns at all. I updated the page so you
    can see what I did exactly.
     
    toxee, Oct 5, 2009
    #6
  7. toxee

    toxee Guest

    On Oct 4, 10:04 pm, John Hosking <> wrote:
    > On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    > > On Oct 4, 9:58 am, "Jan C. Faerber" <> wrote:
    > >> On Oct 4, 4:39 pm, toxee <> wrote:

    >
    > >>>http://www.pearldavis.byethost4.com/

    >
    > >>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    > >>> if I shrink the window some my dropdown list will get hidden somewhat
    > >>> behind the main navigation items

    >
    > I don't have to shrink anything to get this to happen. I mostly have four
    > menu items in each of two rows. The lower row's menu items obscure the
    > submenus of the upper row.
    >
    >
    >
    > >> You can not use

    >
    > >> #menu li{
    > >> position: relative;
    > >> z-index:-1;
    > >> [...] }

    >
    > >> ???

    >
    > > Well what should I use then? I did tinker with z-index values they
    > > worked to no avail. I'm not sure what's going wrong here.

    >
    > Try adding z-index:1; or some larger value to ul.submenu.
    >
    > This should (according to my quick little test in FF2) have the effect of
    > placing the submenus infront of (on top of) the menu items. (I think that
    > was the approach Jan was trying to take, but his suggestion leaves the
    > #menu list items hidden behind body or something.)
    >
    > --
    > John


    Hmm, I added the z-index: 1 to the ul submenu and then added the z-
    index: -1 to
    #menu li and now I have no dropdowns at all. I updated the page so you
    can see what I did exactly.
     
    toxee, Oct 5, 2009
    #7
  8. toxee

    toxee Guest

    On Oct 4, 10:04 pm, John Hosking <> wrote:
    > On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    > > On Oct 4, 9:58 am, "Jan C. Faerber" <> wrote:
    > >> On Oct 4, 4:39 pm, toxee <> wrote:

    >
    > >>>http://www.pearldavis.byethost4.com/

    >
    > >>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    > >>> if I shrink the window some my dropdown list will get hidden somewhat
    > >>> behind the main navigation items

    >
    > I don't have to shrink anything to get this to happen. I mostly have four
    > menu items in each of two rows. The lower row's menu items obscure the
    > submenus of the upper row.
    >
    >
    >
    > >> You can not use

    >
    > >> #menu li{
    > >> position: relative;
    > >> z-index:-1;
    > >> [...] }

    >
    > >> ???

    >
    > > Well what should I use then? I did tinker with z-index values they
    > > worked to no avail. I'm not sure what's going wrong here.

    >
    > Try adding z-index:1; or some larger value to ul.submenu.
    >
    > This should (according to my quick little test in FF2) have the effect of
    > placing the submenus infront of (on top of) the menu items. (I think that
    > was the approach Jan was trying to take, but his suggestion leaves the
    > #menu list items hidden behind body or something.)
    >
    > --
    > John


    Hmm, I added the z-index: 1 to the ul submenu and then added the z-
    index: -1 to
    #menu li and now I have no dropdowns at all. I updated the page so you
    can see what I did exactly.
     
    toxee, Oct 5, 2009
    #8
  9. toxee

    toxee Guest

    On Oct 4, 10:04 pm, John Hosking <> wrote:
    > On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    > > On Oct 4, 9:58 am, "Jan C. Faerber" <> wrote:
    > >> On Oct 4, 4:39 pm, toxee <> wrote:

    >
    > >>>http://www.pearldavis.byethost4.com/

    >
    > >>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    > >>> if I shrink the window some my dropdown list will get hidden somewhat
    > >>> behind the main navigation items

    >
    > I don't have to shrink anything to get this to happen. I mostly have four
    > menu items in each of two rows. The lower row's menu items obscure the
    > submenus of the upper row.
    >
    >
    >
    > >> You can not use

    >
    > >> #menu li{
    > >> position: relative;
    > >> z-index:-1;
    > >> [...] }

    >
    > >> ???

    >
    > > Well what should I use then? I did tinker with z-index values they
    > > worked to no avail. I'm not sure what's going wrong here.

    >
    > Try adding z-index:1; or some larger value to ul.submenu.
    >
    > This should (according to my quick little test in FF2) have the effect of
    > placing the submenus infront of (on top of) the menu items. (I think that
    > was the approach Jan was trying to take, but his suggestion leaves the
    > #menu list items hidden behind body or something.)
    >
    > --
    > John


    Hmm, I added the z-index: 1 to the ul submenu and then added the z-
    index: -1 to
    #menu li and now I have no dropdowns at all. I updated the page so you
    can see what I did exactly.
     
    toxee, Oct 5, 2009
    #9
  10. toxee

    toxee Guest

    On Oct 4, 11:44 pm, toxee <> wrote:
    > On Oct 4, 10:04 pm, John Hosking <> wrote:
    >
    >
    >
    > > On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    > > > On Oct 4, 9:58 am, "Jan C. Faerber" <> wrote:
    > > >> On Oct 4, 4:39 pm, toxee <> wrote:

    >
    > > >>>http://www.pearldavis.byethost4.com/

    >
    > > >>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    > > >>> if I shrink the window some my dropdown list will get hidden somewhat
    > > >>> behind the main navigation items

    >
    > > I don't have to shrink anything to get this to happen. I mostly have four
    > > menu items in each of two rows. The lower row's menu items obscure the
    > > submenus of the upper row.

    >
    > > >> You can not use

    >
    > > >> #menu li{
    > > >> position: relative;
    > > >> z-index:-1;
    > > >> [...] }

    >
    > > >> ???

    >
    > > > Well what should I use then? I did tinker with z-index values they
    > > > worked to no avail. I'm not sure what's going wrong here.

    >
    > > Try adding z-index:1; or some larger value to ul.submenu.

    >
    > > This should (according to my quick little test in FF2) have the effect of
    > > placing the submenus infront of (on top of) the menu items. (I think that
    > > was the approach Jan was trying to take, but his suggestion leaves the
    > > #menu list items hidden behind body or something.)

    >
    > > --
    > > John

    >
    > Hmm, I added the z-index: 1 to the ul  submenu and then added the z-
    > index: -1 to
    > #menu li and now I have no dropdowns at all. I updated the page so you
    > can see what I did exactly.


    Sorry about the multiple posts, I don't know what happened. Hope no
    one plonks me! :p
     
    toxee, Oct 5, 2009
    #10
  11. On Oct 5, 5:31 am, toxee <> wrote:
    > On Oct 4, 7:39 am, toxee <> wrote:
    >
    > >http://www.pearldavis.byethost4.com/

    >
    > > Basicly the main horizontal list overlaps my submenus upon resize. So,
    > > if I shrink the window some my dropdown list will get hidden somewhat
    > > behind the main navigation items. I really need help figuring out how
    > > I can get my dropdown submenus to overlap everything once dropped
    > > down. Thanks in advance for any help or advice.

    >
    > Anyone? I'm dying here.


    Ups! Now I don't get the submenus anymore. (at least with FF).
    Why are your urls not working e.g. www.pearldavis.byethost4.com/meetpearl/index.html
    - is it an apache restriction on your host?
    This is not a part of your problem - just asking because I was looking
    to get them on my desktop.
    And yesterday I found it a little bit confusing to look at your style
    sheet.
    I am not too familiar with that but if you spread styles of one
    element over the whole file it will not make the task much easier -
    but you can make an exception.
     
    Jan C. Faerber, Oct 5, 2009
    #11
  12. toxee

    toxee Guest

    On Oct 5, 12:53 am, "Jan C. Faerber" <> wrote:
    > On Oct 5, 5:31 am, toxee <> wrote:
    >
    > > On Oct 4, 7:39 am, toxee <> wrote:

    >
    > > >http://www.pearldavis.byethost4.com/

    >
    > > > Basicly the main horizontal list overlaps my submenus upon resize. So,
    > > > if I shrink the window some my dropdown list will get hidden somewhat
    > > > behind the main navigation items. I really need help figuring out how
    > > > I can get my dropdown submenus to overlap everything once dropped
    > > > down. Thanks in advance for any help or advice.

    >
    > > Anyone? I'm dying here.

    >
    > Ups! Now I don't get the submenus anymore. (at least with  FF).
    > Why are your urls not working e.g.www.pearldavis.byethost4.com/meetpearl/index.html
    > - is it an apache restriction on your host?
    > This is not a part of your problem - just asking because I was looking
    > to get them on my desktop.

    This is a new site and I'm just starting with the navigation first.
    There's no
    additional pages yet. I just upped on a host so you all could see what
    was
    going on.
    > And yesterday I found it a little bit confusing to look at your style
    > sheet.
    > I am not too familiar with that but if you spread styles of one
    > element over the whole file it will not make the task much easier -
    > but you can make an exception.


    What do you mean? Always open to a few code layout tips.
     
    toxee, Oct 5, 2009
    #12
  13. On Oct 5, 10:17 am, toxee <> wrote:
    > On Oct 5, 12:53 am, "Jan C. Faerber" <> wrote:
    >
    > > On Oct 5, 5:31 am, toxee <> wrote:

    >
    > > > On Oct 4, 7:39 am, toxee <> wrote:

    >
    > > > >http://www.pearldavis.byethost4.com/

    >
    > > > > Basicly the main horizontal list overlaps my submenus upon resize. So,
    > > > > if I shrink the window some my dropdown list will get hidden somewhat
    > > > > behind the main navigation items. I really need help figuring out how
    > > > > I can get my dropdown submenus to overlap everything once dropped
    > > > > down. Thanks in advance for any help or advice.

    >
    > > > Anyone? I'm dying here.

    >
    > > Ups! Now I don't get the submenus anymore. (at least with  FF).
    > > Why are your urls not working e.g.www.pearldavis.byethost4.com/meetpearl/index.html
    > > - is it an apache restriction on your host?
    > > This is not a part of your problem - just asking because I was looking
    > > to get them on my desktop.

    >
    > This is a new site and I'm just starting with the navigation first.
    > There's no
    > additional pages yet. I just upped on a host so you all could see what
    > was
    > going on.


    e.g. in your code of your page you have
    <li class="menu"><a href="meetpearl/index.html">Meet Pearl</a></li>
    I am not able to get this file.

    > > And yesterday I found it a little bit confusing to look at your style
    > > sheet.
    > > I am not too familiar with that but if you spread styles of one
    > > element over the whole file it will not make the task much easier -
    > > but you can make an exception.

    >
    > What do you mean? Always open to a few code layout tips.


    No it's ok - my mistake! It's mixed with 'menu li' and 'li' - so
    that's ok. I did not check it well. (I am a bad validator.)

    hm... http://randsco.com/index.php/2005/09/11/changing_z_index_on_hover
    here after a brief google search it is described that IE does not
    support the z-index on a:hover elements.
    Now you could try to do a similar fix in your style.css
    with something like menu hover -1 and submenu 1
     
    Jan C. Faerber, Oct 5, 2009
    #13
  14. toxee

    toxee Guest

    On Oct 5, 1:49 am, "Jan C. Faerber" <> wrote:
    > On Oct 5, 10:17 am, toxee <> wrote:
    >
    >
    >
    > > On Oct 5, 12:53 am, "Jan C. Faerber" <> wrote:

    >
    > > > On Oct 5, 5:31 am, toxee <> wrote:

    >
    > > > > On Oct 4, 7:39 am, toxee <> wrote:

    >
    > > > > >http://www.pearldavis.byethost4.com/

    >
    > > > > > Basicly the main horizontal list overlaps my submenus upon resize.. So,
    > > > > > if I shrink the window some my dropdown list will get hidden somewhat
    > > > > > behind the main navigation items. I really need help figuring out how
    > > > > > I can get my dropdown submenus to overlap everything once dropped
    > > > > > down. Thanks in advance for any help or advice.

    >
    > > > > Anyone? I'm dying here.

    >
    > > > Ups! Now I don't get the submenus anymore. (at least with  FF).
    > > > Why are your urls not working e.g.www.pearldavis.byethost4.com/meetpearl/index.html
    > > > - is it an apache restriction on your host?
    > > > This is not a part of your problem - just asking because I was looking
    > > > to get them on my desktop.

    >
    > > This is a new site and I'm just starting with the navigation first.
    > > There's no
    > > additional pages yet. I just upped on a host so you all could see what
    > > was
    > > going on.

    >
    > e.g. in your code of your page you have
    > <li class="menu"><a href="meetpearl/index.html">Meet Pearl</a></li>
    > I am not able to get this file.
    >
    > > > And yesterday I found it a little bit confusing to look at your style
    > > > sheet.
    > > > I am not too familiar with that but if you spread styles of one
    > > > element over the whole file it will not make the task much easier -
    > > > but you can make an exception.

    >
    > > What do you mean? Always open to a few code layout tips.

    >
    > No it's ok - my mistake! It's mixed with 'menu li' and 'li' - so
    > that's ok. I did not check it well. (I am a bad validator.)
    >
    > hm...http://randsco.com/index.php/2005/09/11/changing_z_index_on_hover
    > here after a brief google search it is described that IE does not
    > support the z-index on a:hover elements.
    > Now you could try to do a similar fix in your style.css
    > with something like menu hover -1 and submenu 1


    Ok, I just tried it and the fix got overlap working in all browsers
    except for IE.
     
    toxee, Oct 5, 2009
    #14
  15. On Oct 5, 1:05 pm, toxee <> wrote:

    Hi toxee

    > > > > This is not a part of your problem - just asking because I was looking
    > > > > to get them on my desktop.


    I am an idiot! It is an html page which you have not created yet.
    My mistake was that I saved only the html source of your code
    without the JS and the css file.
    Now I got the whole page "saved as..."

    > > No it's ok - my mistake! It's mixed with 'menu li' and 'li' - so
    > > that's ok. I did not check it well. (I am a bad validator.)

    .... as a newbee in css it is still confusing to use li as element name
    and tag element mixed - but np.

    > > Now you could try to do a similar fix in your style.css
    > > with something like menu hover -1 and submenu 1

    >
    > Ok, I just tried it and the fix got overlap working in all browsers
    > except for IE.


    Now I am impressed. The effect of the menus is much better than
    before. (o:
    It is not working in your IE8??? Really?
    I started mine on Linux with
    wine iexplore.exe http://www.pearldavis.byetht4.com/
    and everything works great! The submenus when activated hide the main
    menu.
    I think that is your intention.
    I am sorry - I don't have IE8 on Windows at the moment -
    it will take me ages to start win2000 with VMPlayer.
    But if your page is working in IE8 with my windows emulation it should
    work fine on windows too! Even better!

    I don't know the problem now.
    Did you change the code meanwhile?
    Last try: You still have some 'hover' { ... }s in your style sheet
    without the z-index. For me in IE8 is working now - but for you: What
    happens if you add at any 'hover' the z-index (-1 for menu and 1 for
    sub_menu) ???

    Best wishes
    Jan
     
    Jan C. Faerber, Oct 5, 2009
    #15
  16. toxee

    toxee Guest

    On Oct 5, 5:16 am, "Jan C. Faerber" <> wrote:
    > On Oct 5, 1:05 pm, toxee <> wrote:
    >
    > Hi toxee
    >
    > > > > > This is not a part of your problem - just asking because I was looking
    > > > > > to get them on my desktop.

    >
    > I am an idiot! It is an html page which you have not created yet.
    > My mistake was that I saved only the html source of your code
    > without the JS and the css file.
    > Now I got the whole page "saved as..."
    >
    > > > No it's ok - my mistake! It's mixed with 'menu li' and 'li' - so
    > > > that's ok. I did not check it well. (I am a bad validator.)

    >
    > ... as a newbee in css it is still confusing to use li as element name
    > and tag element mixed - but np.
    >
    > > > Now you could try to do a similar fix in your style.css
    > > > with something like menu hover -1 and submenu 1

    >
    > > Ok, I just tried it and the fix got overlap working in all browsers
    > > except for IE.

    >
    > Now I am impressed. The effect of the menus is much better than
    > before. (o:

    Heh, thanks. It's an old script from this site. It also makes the
    menus work with older versions of IE, 5 and 6 I think.
    http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
    > It is not working in your IE8??? Really?
    > I started mine on Linux with
    > wine iexplore.exehttp://www.pearldavis.byetht4.com/
    > and everything works great! The submenus when activated hide the main
    > menu.

    Oh, that's good to know it works ok in 8. Right now I'm running 7 in
    XP with no overlap still.
    > I think that is your intention.
    > I am sorry - I don't have IE8 on Windows at the moment -
    > it will take me ages to start win2000 with VMPlayer.
    > But if your page is working in IE8 with my windows emulation it should
    > work fine on windows too! Even better!
    >
    > I don't know the problem now.
    > Did you change the code meanwhile?
    > Last try: You still have some 'hover' { ... }s in your style sheet
    > without the z-index. For me in IE8 is working now - but for you: What
    > happens if you add at any 'hover' the z-index (-1 for menu and 1 for
    > sub_menu) ???
    >
    > Best wishes
    > Jan


    You're right, I have been playing with z-index in different areas of
    the style sheet. I've tried adding higher z-indexes to them to no
    avail, I'll still play around some more. I hope I can get this figured
    out. Thank you so much Jan for you help so far, much appreciated.
     
    toxee, Oct 5, 2009
    #16
  17. On Oct 5, 3:06 pm, toxee <> wrote:

    > Oh, that's good to know it works ok in 8. Right now I'm running 7 in
    > XP with no overlap still.
    > You're right, I have been playing with z-index in different areas of
    > the style sheet. I've tried adding higher z-indexes to them to no
    > avail, I'll still play around some more. I hope I can get this figured
    > out. Thank you so much Jan for you help so far, much appreciated.


    hm - today I saw there is a pack for IE5&6 for wine. If I get it
    running next time I will return to that thing. For now I would like to
    stop it.

    Cheers Jan
     
    Jan C. Faerber, Oct 5, 2009
    #17
  18. toxee

    John Hosking Guest

    On Sun, 4 Oct 2009 23:13:48 -0700 (PDT), toxee wrote:

    > On Oct 4, 10:04 pm, John Hosking wrote:
    >> On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    >>> On Oct 4, 9:58 am, "Jan C. Faerber" wrote:
    >>>> On Oct 4, 4:39 pm, toxee wrote:

    >>
    >>>>>http://www.pearldavis.byethost4.com/

    >>
    >>>>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    >>>>> if I shrink the window some my dropdown list will get hidden somewhat
    >>>>> behind the main navigation items

    >>
    >> I don't have to shrink anything to get this to happen. I mostly have four
    >> menu items in each of two rows. The lower row's menu items obscure the
    >> submenus of the upper row.
    >>
    >>>> You can not use

    >>
    >>>> #menu li{
    >>>> position: relative;
    >>>> z-index:-1;
    >>>> [...] }

    >>
    >>>> ???

    >>
    >>> Well what should I use then? I did tinker with z-index values they
    >>> worked to no avail. I'm not sure what's going wrong here.

    >>
    >> Try adding z-index:1; or some larger value to ul.submenu.
    >>
    >> This should (according to my quick little test in FF2) have the effect of
    >> placing the submenus infront of (on top of) the menu items. (I think that
    >> was the approach Jan was trying to take, but his suggestion leaves the
    >> #menu list items hidden behind body or something.)
    >>
    >> --
    >> John


    Please don't quote signatures. I know you're posting to usenet via
    GoogleGroups so you'll have to trim the signatures manually.

    >
    > Hmm, I added the z-index: 1 to the ul submenu


    Good.

    > and then added the z-index: -1 to #menu li


    Bad.

    > and now I have no dropdowns at all.


    Right, as I mentioned in my post.

    > I updated the page so you can see what I did exactly.


    You seem to have done some other things, because I still/again see the
    dropdowns. In which case, I guess you're happy now.

    You'll be happier in the future, BTW (and this is separate from the problem
    in your OP), if you don't size everything in px. Take a look at what
    happens on text zoom (upsize). Consider using ems instead of pixel sizing,
    as for example in

    #menu li ul{
    width: 25em; /* rather than 500px */

    #menu li{
    height: 4em; /* rather than 60px */

    HTH

    --
    John
    This is my .sig. Trim it away when replying. It's not even funny. *yawn*
     
    John Hosking, Oct 5, 2009
    #18
  19. toxee

    toxee Guest

    On Oct 5, 1:50 pm, John Hosking <> wrote:
    > On Sun, 4 Oct 2009 23:13:48 -0700 (PDT), toxee wrote:
    > > On Oct 4, 10:04 pm, John Hosking wrote:
    > >> On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    > >>> On Oct 4, 9:58 am, "Jan C. Faerber"  wrote:
    > >>>> On Oct 4, 4:39 pm, toxee wrote:

    >
    > >>>>>http://www.pearldavis.byethost4.com/

    >
    > >>>>> Basicly the main horizontal list overlaps my submenus upon resize. So,
    > >>>>> if I shrink the window some my dropdown list will get hidden somewhat
    > >>>>> behind the main navigation items

    >
    > >> I don't have to shrink anything to get this to happen. I mostly have four
    > >> menu items in each of two rows. The lower row's menu items obscure the
    > >> submenus of the upper row.

    >
    > >>>> You can not use

    >
    > >>>> #menu li{
    > >>>> position: relative;
    > >>>> z-index:-1;
    > >>>> [...] }

    >
    > >>>> ???

    >
    > >>> Well what should I use then? I did tinker with z-index values they
    > >>> worked to no avail. I'm not sure what's going wrong here.

    >
    > >> Try adding z-index:1; or some larger value to ul.submenu.

    >
    > >> This should (according to my quick little test in FF2) have the effect of
    > >> placing the submenus infront of (on top of) the menu items. (I think that
    > >> was the approach Jan was trying to take, but his suggestion leaves the
    > >> #menu list items hidden behind body or something.)

    >
    > >> --
    > >> John

    >
    > Please don't quote signatures. I know you're posting to usenet via
    > GoogleGroups so you'll have to trim the signatures manually.
    >
    >
    >
    > > Hmm, I added the z-index: 1 to the ul submenu

    >
    > Good.
    >
    > > and then added the z-index: -1 to  #menu li

    >
    > Bad.
    >
    > > and now I have no dropdowns at all.

    >
    > Right, as I mentioned in my post.
    >
    > > I updated the page so you can see what I did exactly.

    >
    > You seem to have done some other things, because I still/again see the
    > dropdowns. In which case, I guess you're happy now.

    Well I certainly am for the others browsers. In IE7 and down though
    I'm screwed
    until I can get things working right. I really need to figure this out
    soon and
    I'm at my wits end.
    > You'll be happier in the future, BTW (and this is separate from the problem
    > in your OP), if you don't size everything in px. Take a look at what
    > happens on text zoom (upsize). Consider using ems instead of pixel sizing,
    > as for example in
    >
    > #menu li ul{
    > width: 25em;   /* rather than 500px */
    >
    > #menu li{
    > height: 4em;   /* rather than 60px */

    You're right, I liked em but the reason I stopped using it was because
    I'd always get different results in various browsers.
    Whereas px while cumbersome, was a bit more specific. I'll experiment
    some since in the case of the menus, it does look
    a lot better with em, thanks!
    > HTH
    >
    > --
    > John
    > This is my .sig. Trim it away when replying. It's not even funny. *yawn*
     
    toxee, Oct 6, 2009
    #19
  20. toxee

    toxee Guest

    On Oct 5, 6:23 pm, toxee <> wrote:
    > On Oct 5, 1:50 pm, John Hosking <> wrote:
    >
    > > On Sun, 4 Oct 2009 23:13:48 -0700 (PDT), toxee wrote:
    > > > On Oct 4, 10:04 pm, John Hosking wrote:
    > > >> On Sun, 4 Oct 2009 17:27:40 -0700 (PDT), toxee wrote:
    > > >>> On Oct 4, 9:58 am, "Jan C. Faerber"  wrote:
    > > >>>> On Oct 4, 4:39 pm, toxee wrote:

    >
    > > >>>>>http://www.pearldavis.byethost4.com/

    >
    > > >>>>> Basicly the main horizontal list overlaps my submenus upon resize.. So,
    > > >>>>> if I shrink the window some my dropdown list will get hidden somewhat
    > > >>>>> behind the main navigation items

    >
    > > >> I don't have to shrink anything to get this to happen. I mostly have four
    > > >> menu items in each of two rows. The lower row's menu items obscure the
    > > >> submenus of the upper row.

    >
    > > >>>> You can not use

    >
    > > >>>> #menu li{
    > > >>>> position: relative;
    > > >>>> z-index:-1;
    > > >>>> [...] }

    >
    > > >>>> ???

    >
    > > >>> Well what should I use then? I did tinker with z-index values they
    > > >>> worked to no avail. I'm not sure what's going wrong here.

    >
    > > >> Try adding z-index:1; or some larger value to ul.submenu.

    >
    > > >> This should (according to my quick little test in FF2) have the effect of
    > > >> placing the submenus infront of (on top of) the menu items. (I think that
    > > >> was the approach Jan was trying to take, but his suggestion leaves the
    > > >> #menu list items hidden behind body or something.)

    >
    > > >> --
    > > >> John

    >
    > > Please don't quote signatures. I know you're posting to usenet via
    > > GoogleGroups so you'll have to trim the signatures manually.

    >
    > > > Hmm, I added the z-index: 1 to the ul submenu

    >
    > > Good.

    >
    > > > and then added the z-index: -1 to  #menu li

    >
    > > Bad.

    >
    > > > and now I have no dropdowns at all.

    >
    > > Right, as I mentioned in my post.

    >
    > > > I updated the page so you can see what I did exactly.

    >
    > > You seem to have done some other things, because I still/again see the
    > > dropdowns. In which case, I guess you're happy now.

    >
    > Well I certainly am for the others browsers. In IE7 and down though
    > I'm screwed
    > until I can get things working right. I really need to figure this out
    > soon and
    > I'm at my wits end.> You'll be happier in the future, BTW (and this is separate from the problem
    > > in your OP), if you don't size everything in px. Take a look at what
    > > happens on text zoom (upsize). Consider using ems instead of pixel sizing,
    > > as for example in

    >
    > > #menu li ul{
    > > width: 25em;   /* rather than 500px */

    >
    > > #menu li{
    > > height: 4em;   /* rather than 60px */

    >
    > You're right, I liked em but the reason I stopped using it was because
    > I'd always get different results in various browsers.
    > Whereas px while cumbersome, was a bit more specific. I'll experiment
    > some since in the case of the menus, it does look
    > a lot better with em, thanks!
    >
    > > HTH

    >
    > > --
    > > John
    > > This is my .sig. Trim it away when replying. It's not even funny. *yawn*


    Ok, so I just figured something out but have a new issue. I changed
    #menu li ul to relative instead of absolute after reading about how IE
    might not like that sort of thing and now there's no dreaded overlap
    in the newer browsers I tested them in. But in IE6 it's just insanity.
    The dropdown menus make every in their path on all sides shift away.

    Example Pic
    http://i37.tinypic.com/2zywvpu.jpg

    Thought I could happily move on, but apparently it's back to the
    drawing board. :/
    SOS man overboard!
     
    toxee, Oct 6, 2009
    #20
    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. chlori
    Replies:
    2
    Views:
    475
    Toby A Inkster
    Mar 3, 2004
  2. Exch
    Replies:
    0
    Views:
    391
  3. Jonathan
    Replies:
    5
    Views:
    673
    BootNic
    Jan 6, 2007
  4. jobs
    Replies:
    0
    Views:
    3,872
  5. jobs
    Replies:
    0
    Views:
    403
Loading...

Share This Page