I have a specific query regarding a particular issue that I am unsure how to address but would like to implement on my website.
1) My requirement is that when the parent li element has a child, I want the navigation to remain in a hovered state with the same effect even when navigating through the child elements. Currently, the hover effect gets removed once the cursor moves away from it, causing the child elements to display the hover effect instead. I desire for the parent li element to retain the hover effect while traversing the sub-navigation.
2) Additionally, I am seeking assistance on creating a transition effect where hovering over any navigation links results in a fade-in and out effect upon entry and exit. How can I achieve this?
I made an attempt using the following CSS:
#nav li:hover > ul{
left:0;
z-index:100;
transition: all 2.4s ease-in-out -2s;
-moz-transition: all 2.4s ease-in-out -2s;
-webkit-transition: all 2.4s ease-in-out -2s;
}
Although it produced unexpected yet interesting outcomes of sliding out the submenus to the right, it wasn't what I had originally intended. I am still looking for guidance on incorporating the desired features. You can view my complete code here: jsfiddle nav code