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/
Related
Does anyone know how to achieve this menu effect? If you go to https://unity.com on desktop hover over the solutions in the menu then hover the links. You will see the text change on the right as you hover over different links. That's what I want to achieve. I have already got a mega menu for the client but they want this text hover effect. 😬
I'm trying to create a mega menu using a guide I've found by Valeriu Timbuc here: https://designmodo.com/create-css3-mega-menu/
I've found out while playing around with it that when a menu item is selected to show the menu div (menu 1), then when you select another menu (menu 2) to show it's menu div, if you move your mouse below the selected menu div (menu 2 - as you would when you're trying to select an item from the newly selected div), the selected menu jumps back to your first selected menu item (menu 1).
This only happens for menu items going right to left - it does not happen for items going from left to right. on the web demo it looks like it happens going both ways, on my personal test it only occurs going right to left
To reproduce the behaviour, perform the following on the demo page here: https://designmodo.com/demo/css3megamenu/
hover on the "Earnings" menu item
hover on any menu items to it's left - say "Top Rated" or "What's New", (for this example, we will use the "What's New" link as this has items in the drop down menu)
as soon as the "What's New" items are displayed, move your mouse down to select an item from the "What's New" drop down menu
the screen jumps back to the "Earnings" menu.
Doing the same thing but in the opposite direction from left to right, that is, having the "What's New" menu item selected first, then hovering on the "Earnings" menu item will show the correct behaviour where moving the mouse will not jump back to the previously selected menu item.
To view what is happening in action, please have a look at the video here: https://imgur.com/a/3Jg4w0b
This mega menu is perfect for what I need to do apart from this medium issue. Any help regarding this would be appreciated.
After going through multiple mega menu solutions, I've figured out what seems to be causing this issue.
When defining menu items in the menu dropdown section, the CSS for the display should be set to "None" (instead of "Block" shown in the demo) to prevent the div from being accessible at all.
Even though the div seems hidden as the visibility and overflow is set to "Hidden", it looks like the div area still exists which is why hovering below the menu item still acts as if the previous drop down menu item has been selected as that drop down still has a div showing on screen.
On the hover CSS, the display should be set to "Block" which will only draw the element while you hover on the link.
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 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?