HTML/CSS Drop-down Menu Issues

[holmedwa04]

Hello,

 

I am having some issues with the drop-down on this site: www.staffordscuba.co.uk

 

On the front page there is a video, but for any menu that drops down over the video, as soon as the mouse goes onto the video area, the drop down disappears!

 

I am guessing this is going to be some sort of issue with how the video or the menu is set to float with the other objects?

 

Also, on the same topic, hovering over something on a computer is fine, but can be very tricky on a mobile device! Is there a way of fixing this issue on a mobile device without creating a complete mobile phone style-sheet?

 

Any help would be much appreciated.

 

Kind Regards

 

Edward

[dustcomposer]

Have you tried using z-index to bring the menu to front (up)?

or place the <video> before the menu list on the html.

Edited October 19, 2014 by dustcomposer

[holmedwa04]

Have you tried using z-index to bring the menu to front (up)?

or place the <video> before the menu list on the html.

 

I did think it may be something similar to this, I tried this code in the main stylesheet, but this didn't seem to do anything:

video {	z-index: -1;}

What is interesting, it that the website works fine in IE but on Chrome it doesn't.

 

I look forward to hearing from you.

[dsonesuk]

Yes! adding position: relative; and z-index: 999; to header so it and all child elements will have higher level than main content including video seems to work, note this seems to be problem for chrome and safari browsers.

[dsonesuk]

 

I did think it may be something similar to this, I tried this code in the main stylesheet, but this didn't seem to do anything:

video {	z-index: -1;}

What is interesting, it that the website works fine in IE but on Chrome it doesn't.

 

I look forward to hearing from you.

Won't work because video is child of main, which only affects layer level of sibling elements, adjusting header z-index compared to its sibling main container element means its layer will overlap it and its child elements i.e the video element.

[holmedwa04]

Thanks dsonesuk, that worked a treat! I was thinking from the start that it may be something to do with this, but had never had cause to use z-index. The one with 999 and position relative worked

 

Any ideas about mobile browsing and hovering? It worked on mobile Chrome then after an update it stopped!

[dsonesuk]

all mobile browsers or just chrome? If it worked fine on mobiles before update, you need to reset it for mobile device.

[holmedwa04]

I have been able to test in the following mobile browsers:

 

• Android
• Chrome
• Firefox
• Opera

The issue is that unless you have a phone with a stylus like the Note3/4 where you can hover on things, the default menu item is selected.

 

So for example, the Diary dropdown links to Diary 2014 by default, unless you select another options. When viewing on a phone, tapping Diary will take you to diary and not lower the menu to select an option.

 

The dropdown seemed to work on an older version of the Chrome app, but no longer works. There is no way I can go back to an older version of chrome on my phone.

[dustcomposer]

I haven't tried this on real device but perhaps this article can help: http://designshack.net/articles/css/are-hover-events-extinct/

[holmedwa04]

dustcomposer, thanks for the article. It is very interesting and probably does answer some of my questions. Namely, don't try to use the pseudo class selector for drop down menus if you want full compatibility on mobile phones, without the need for a mobile device stylesheet!

 

Before the update on Google Chrome, I believe the dropdown operated when you tapped it once and then if you tapped a second time it would go to the default option. Prior to having 'default' options for each drop down, the hover was just used to display the menu. This would still work on a phone with a single tap if I removed the 'default' links. The 'default' link isn't essential, so they can be removed.

 

But before I give up, it occurred to me that it may be possible to use some kind of conditional statement that if browsing on a mobile device, the 'defaults' aren't links, just dropdowns and if browsing on a desktop, they a 'default' links? I'm sure this kind of thing is possible with little new code. Any advice?

[dustcomposer]

Any advice?

 

 

well, don't give up.

 

There is a way to detect user's device using navigator.userAgent; (just in case) here is the link about Navigator and userAgent, and here's another example to implement the code. I learnt about this before, but again, I never dealing with mobile stuff.. they always have very small things. You might want to try userAgent to detect user's device and insert some functions you need.