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.
Related
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'm trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
I've created menu drop down menu in pure css,
here, parent div have position:relative and the menu popup have position:absolute,
when the menu hovered the submenu will appear as display:block,
but here, hovering sarees (first menu) the popup menu appears perfectly, but hovering the last menu webmenus, the popup appers at wrong position (different position). The images uploaded below
I want to make the same position with all submenu popups like sarees's submenu popup have.
is there any css hack for this .. ?
Images :
I want this position for all menus
The menu Displaying at wrong position
I noticed that you are using position: relative to the menus, including the drop down menus. That is the why you are having this issue. You set the menu as absolute and it is understood as relatively to its respective parent. If you remove the position: relative it will set absolute position relatively to the page.
Update:
See a Fiddle HERE
and compare to this another Fiddle HERE
Did you see the difference?
Sorry if my english is bad
Remove position:relative; to each .menuTemplate1 li
That way the menu will open always on the left side, as your image shows.
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 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.