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.
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'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 this menu that when I hover on certain items, it dropsdown a list of new items. Sometimes this list is bigger than the browser window, so user need to scroll the page down to be able to see the whole list. The problem is that when the mouse reacher the scrollbar naturaly the menu lose it's hover function. I need to fix that asap, any suggestions?
Thanks.
Instead of doing hover on the menu item, maybe you should do an onclick event. This would allow the menu to appear on click and then when the user clicks the menu again it could make the sub-menu hide. This would allow you to scroll down the page and still have the sub-menu showing.
BTW, this assumes you cannot break the menu down into sub-menus like Nathan MacInnes mentioned.
Well if the user has to move the mouse off of the menu, it naturally should close. Maybe you should try making the menu shorter, or try making the menu itself scroll?
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 created a css dropdown menu so my site will work with iphones. The dropdown is working correctly except for when you hover over a dropdown the sub items in the menu expand but when you hover over them the image on the main dropdown item looses it's color. I have it setup so that a different image is displayed when the mouse is hovering over it. Here is a link to pretty much the same code I have on my website. I just want the image to stay the same whether I am hovering over the main menu item or the subitems. Any help would be much appreciated.
http://jsfiddle.net/h5xZT/5/
To update your code it's simple. That should set you on your way. There is no need to use the "button" within a li item.
http://jsfiddle.net/h5xZT/19/