Primary Navigation

Hi,

You can try this code.

.main-navigation .main-nav ul li > a:hover {
  border-bottom: 2px solid red;
  box-shadow: 5px 10px 10px rgba(68, 68, 68, 0.3);
  border-radius: 5px;
}

Just change the color values to your preference.

I am looking to give border bottom and border bottom radius here only: https://ibb.co/b5RCX8V

Shadow effect should be in the whole primary when hover

I am looking to give border bottom and border bottom radius here only: https://ibb.co/b5RCX8V

Shadow effect should be in the whole primary when hover

To clarify, you want the border bottom radius and the shadow effect on the primary menu's submenu?

Let's tackle first:

I want to achieve border-bottom and border-bottom-radius in the drop-down menu when hover and shadow should also be in the dropdown when hover.

Can you share a link to your site - it will be easier for us to work out the CSS

https://www.masteryblogging.com/

Try this CSS:

.main-navigation ul ul {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

You can fine-tune the shadow part with this site:
https://www.cssmatic.com/box-shadow