How to solve a Hover for a Sub-menu with different parameters?

Question

I have a WordPress. There is a hover for a class called sub-menu. When I move the mouse over it has a hover and shows the child pages. I already found the solution to get custom classes to WordPress Menus (Menus -> Screen Options -> CSS Classes) I gave it the class horizontal.

the problem is I need it a deeper z-index to lay it under a shadow but then it disappears when I try to hover it. (version 2)

Without the Z-index (version 1) it even does not work on mobile devices as they don't recgonize a "finger-mouse-over" so my idea was to fix the sub-menu after clicking and leave it open.

$('.horizontal a').click(function(e){
 e.preventDefault(); //to prevent the default behaviour of <a>
 $(this).parent().removeClass('sub-menu').addClass('submenu');//to change the css 
   });

Problem here, it is doing that on the current page. not on the page I need it.

any solution for this? is it a good Idea to fix it or is there another way for mobile devices which also works on normal computers.

Answer 1

If I understand your issue correctly, then one possible solution that may work for you is to use an after class to add your gradient overlay

Updated Demo Fiddle

EDIT - Try this out now, you put the drop shadow gradient in place, and then let the sub-menu overlap it. You fix this visually by adding the same gradient onto the sub-menu but sizing it to only fit the dropdown.

HTML:

<ul class="nav">
    <li>lorem
        <ul class="sub-nav">
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
        </ul>
    </li>
    <li>lorem</li>
    <li>lorem</li>
</ul>

CSS:

 .nav:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    height: 10px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.65)), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}

 .sub-nav:after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 40px;
    width: 100px;
    height: 10px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.65)), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}

Answer 2

DEMO JSFIDDLE

You can not make it by hover because hover works the div itself and its child divs. Child div can not have z-index lower than parent, so this make hover useless for this case.

Here you need to use js and css. You can use mouseennter and mouseleave functions also you need to fix z-index problems, I created a demo to demonstrate this problem and it is working now.

.box1,.box2
{
    background-color:red;
    width:100px;
    height:100px;
    margin-left:10px;
    color:#FFF;
    line-height:100px;
    text-align:center;
    font-weight:bolder;
    display:block;
    -webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    position:relative;
    z-index:999;
}

.box2
{
    opacity:0;
    background-color:green;
    display:block;
    position:relative;
    z-index:1;
}