How do I make my submenu overlap the main menu?

T

toxee

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

Jan C. Faerber

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;
[...] }

???
 
T

toxee

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

toxee

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

John Hosking

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.)
 
T

toxee

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

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

toxee

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

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

toxee

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

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

toxee

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

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

toxee

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

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
 
J

Jan C. Faerber

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

toxee

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

Jan C. Faerber

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
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
 
T

toxee

e.g. in your code of your page you have



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

Jan C. Faerber

Hi toxee

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..."
.... as a newbee in css it is still confusing to use li as element name
and tag element mixed - but np.
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
 
T

toxee

Hi toxee


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


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



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

Jan C. Faerber

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
 
J

John Hosking

On Oct 4, 9:58 am, "Jan C. Faerber" wrote:
On Oct 4, 4:39 pm, toxee wrote:

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

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
 
T

toxee

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

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!
 
T

toxee

On Oct 4, 10:04 pm, John Hosking wrote:
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.)
Please don't quote signatures. I know you're posting to usenet via
GoogleGroups so you'll have to trim the signatures manually.
Right, as I mentioned in my post.
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!

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!
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top