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
Related
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.
Am using the below drop down for my site header menu.
https://www.script-tutorials.com/demos/364/index.html
In this, When mouse hovering below spaces of the menu also Dropdown menu appearing.
I used this code in my site. I wasn't able to find out whats the solution.
I tried z-indexing and position as relative but still it appears. please guide me.
Thanks.
yes z-index but it a minus value like z-index:-100;
I checked the plugin the problem is your action happens when you hover li and the sub-menu is present inside li. So that is the reason whatever element that comes inside of li will be part of li.
You can do 1 thing in this scenario:
Best Solution:
.submenu{height:0;}
Let me know if this works!!
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 used this menu as a template for my own :
http://ago.tanfa.co.uk/css/examples/menu/hs7.html
I used the same technique as this menu I just changed the css like colors/fonts size etc. Now the issue I have is that when I hover root items like 'CSS Drop Down Menus' in the example from the link.
The sub menu dissapears if I don't jump to the menu really quickly, and its driving me nuts. Did anyone have similar issues?
Usually this behavior is because of top margin or positioning (like top: 2px on an absolute or relative element) on the submenus that is creating a "gap" between the main menu item and the submenu. Without your actual code posted, that is the only advice I can give.
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.