Jump to content

HTML/CSS Drop-down Menu Issues


Recommended Posts

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

 

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.

Link to post
Share on other sites

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!

Link to post
Share on other sites

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.

Link to post
Share on other sites

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?

Link to post
Share on other sites
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...