A sub-menu div in a navigation bar isn't displaying on hover in OS X Safari 10.0. It works fine in Chrome and Firefox.
Here's a JSFiddle: https://jsfiddle.net/rk5bmpud/1/
If you hover over "Our Services", then one sub-menu drops down, then hover over either "Risk Management" or "Integrated Services" and another menu should slide out from left to right. They do in other browsers, but not in Safari.
The elements in question are:
<div class="sub-menu">
<ul>
<li>
Risk Management Consultancy
</li>
etc...
</ul>
</div>
Safari's dev tools show that the div is opening and closing on hover as it should do (you can see the blue box highlighting the div when it's open), but the div and none of it's children are displaying.
I've tried different display properties, position properties and z-index in CSS. Different position properties allow me to see the div and it's contents, but of course not where I want them to be.
Can anyone see what I'm missing here?
Update
I've discovered that if the sub-menu's grand-parent div, with class .menu, is set to position: static; then the sub-menu in question is displayed. This isn't really a solution as I don't want to have to re-build it this way (although I will as a workaround if I can't find a proper solution). Interestingly, the position property of the sub-menu's immediate parent, <li>, doesn't make a difference.
Related
I have a little issue with a menu on my Joomla 2.5 page. It's a module and I used several CSS properties like:
visibility:visible; z-index:99999!important
Yet, the menu does not delays for me to click it.
I want the menu to be clickable when the reader mouse over and mouse on the second level menu. I don't want it to disappear any more.
A sample of what I want the menu to look like can be found here: http://vitafoam.com.ng
On the css class ul.navi ul.level2 on menustyle.css, remove the top: 91px property. It is throwing your level2 menu down, and keeping you from hovering it.
Removing the top property fixed the problem, at least on my Chrome Debug.
I have a basic css only dropdown menu that works great in Chrome and Firefox but not so well in IE9. The issue is that the design I am implementing has a slight gap between the horizontal row of parent items and their respective child lists of sub navigation items.
I'm displaying the sub-menus on hover of the parent li. The sub-menus appear fine in all browsers.
The problem occurs when I attempt to move the cursor across the small (about 10px) gap between the parent li and the submenu unordered list. The cursor does not actually leave the parent li as the gap is made by applying a larger height to the li (and a smaller height to its child anchor element) so I do not understand why IE is acting like li:hover is no longer happening once my cursor is no longer on the child link.
If I move the cursor really fast across the gap I can actually make it to the sub menu and use it fine but this is no good for usability reasons.
I'm definitely missing something really obvious here!!
To view the problem please visit http://beta.pancreaticcanceraction.org/
Add 'preview2012' to the end of that URL to access the site (I didn't want to put the whole link down in case it gets crawled).
Thanks in advance for any help!
If you set the background of your LI (LI.parent) to be red, you will see that in IE, it doesn't matter how much extra height you give it, it's only as high as the containing NAV element.
I've been mucking around with the IE9 dev tool, to try and get it to sit on top and "outside" the NAV container, but no luck yet. I thought I would post to help get you on the right direction.
EDIT:
if you put a "position: relative" on your UL.menu element, it fixes the issue.
Hope that helps!
I have this site http://www.eurotrend-dss.sk/ and i have problem with big orange menu.
If you click on EUROTREND DSS menu item, whole menu will jump a little bit. A can not find solution in css.
The jump is visible for me only in Chrome and Opera. In FF and IE it seems to be OK.
I think problem is with padding-top:10px, but i can not find solution not using this padding.
use margin-top instead of padding-top for the li
I have a menu on the top of a page and when I get the sub menu, it is collapsing with the existing html on the host page
Menu when not yet clicked
Menu when menu item clicked
Just notice the blue line is comming on the top of the sub menu
The menu is found in a div
can someone helps??
So what I understand is your sub menu doesn't come on top of the blue bar, but instead, is seen under it. That could be the problem, but need not be.
You'll need to find the CSS class used for the sub menu (something like firebug on Firefox will help you here, or IE developer toolbar in IE), and then check the following:
1) If there's a background colour set anywhere. If not, add it
2) the z-index of the sub menu. If its no >= 1, then increase it. If there is no z-index, try adding it to 1 or 10. Check the z-index of the logo image. If there is no z-index, don't worry about it. If there is, you need to make sure that the z-index of the submenu is greater than the z-index of the logo image.
This is because the z-index of blue line is more than the z-index of menu.So through the css if you increase the z-index of menu than the blue line then your problem can be solved.
I have a Son of Suckerfish menu set up, but when I hover over the menu item, the sub menu appears on the left of the screen, rather than directly below the item I hovered over.
eg http://blacktownworkersgroup.worldsecuresystems.com/bwc09/events
When you hover over 'Events' the sub menu is supposed to appear below this item.
It's working correctly in Safari and Chrome, but not in IE7, Firefox 3, Opera.
The css shows the block to be using absolute positioning. You will need to set top and left attributes to position it correctly.
Otherwise change it to position:relative; and use float:left; as in this tutorial on SoS dropdowns
I fixed it up.
The original list items needed to be floated, rather than displayed inline. There may have been other elements affecting it also, but it's fixed now!