How do I drop shadows underneath my navigation and the sub-item underneath my navigation separately when hovering separately?

As the title, I want to add shadows underneath my navigation and the sub-item underneath my navigation separately when hovering separately.

I found the code but it's making both Work and LanguageLand have shadows at the same time while hovering (as attached).

But I want only Work has a shadow when hovering while only LanguageLand has a shadow when hovering.

Can anyone help me with this? Thank you so much!

div.header-nav-item:hover  a {
    text-shadow: 3px 3px 5px #EFF193;
}

Many thanks

19 hours ago, Kacy-Jung said:

As the title, I want to add shadows underneath my navigation and the sub-item underneath my navigation separately when hovering separately.

 

I found the code but it's making both Work and LanguageLand have shadows at the same time while hovering (as attached).

But I want only Work has a shadow when hovering while only LanguageLand has a shadow when hovering.

Can anyone help me with this? Thank you so much!

 

div.header-nav-item:hover  a {
    text-shadow: 3px 3px 5px #EFF193;
}

 

Many thanks

Can you share your URL so I can check it?

Here you are!!!

kacy-jung.com

I also upload the screenshot. I am hoping when I hover over Work, only Work is dropping shadow but not both Work and Case Study 1. When I hover over Case Study 1, the shadow underneath Work would disappear.  

Thank you soooo much!!!

33 minutes ago, Kacy-Jung said:

Here you are!!!

kacy-jung.com

I also upload the screenshot. I am hoping when I hover over Work, only Work is dropping shadow but not both Work and Case Study 1. When I hover over Case Study 1, the shadow underneath Work would disappear.  

Thank you soooo much!!!

Use the following css

.header-nav-item > a:hover {
  text-shadow: 0px 12px 8px rgba(0,0,0,0.6) !important;  
}

.header-nav-folder-content > .header-nav-folder-item > a:hover {
  text-shadow: 0px 12px 8px rgba(0,0,0,0.6) !important;  
}

It is still showing two shadow (black and yellow) so weird. I deleted my original code. I don't know why the yellow is still there. But the black is doing what we wish it does!

And I also want to assign color and size #3px 3px 5px #EFF193 to my shadow

I attached screenshot here. Is there way I can do that?

This is my origina code!

div.header-nav-item:hover  a {
    text-shadow: 3px 3px 5px #EFF193;
}

Many thanks!

On 6/22/2024 at 12:11 AM, Kacy-Jung said:

It is still showing two shadow (black and yellow) so weird. I deleted my original code. I don't know why the yellow is still there. But the black is doing what we wish it does!

And I also want to assign color and size #3px 3px 5px #EFF193 to my shadow

I attached screenshot here. Is there way I can do that?

This is my origina code!

div.header-nav-item:hover  a {
    text-shadow: 3px 3px 5px #EFF193;
}

Many thanks!

 

 

Use this new CSS code

div.header-nav-item:hover a {
    text-shadow: unset !important;
}
div.header-nav-item > a:hover {
  text-shadow: 0px 12px 8px rgba(0,0,0,0.6) !important;  
}

.header-nav-folder-content > .header-nav-folder-item > a:hover {
  text-shadow: 0px 12px 8px rgba(0,0,0,0.6) !important;  
}