https://i.sstatic.net/PIWly.png --> image displayed when the "products" Nav item is hovered, showing a dropdown menu
https://i.sstatic.net/YHX1g.png --> image of the "products" Nav item after hovering is removed (shadow remains even when the dropdown menu is gone)
A style attribute of -webkit-filter is written for the dropdown menu (using bootstrap 5). Here is how the dropdown menu changes in style:
https://i.sstatic.net/86tB1.png --> closed state
https://i.sstatic.net/kTf68.png --> display set to block state
Tried Approaches:
- removed -webkit-filters and -webkit-appearance attributes when the dropdown display is hidden, and applied them only when the display is set to block. Also attempted with filters and background attributes.
https://i.sstatic.net/ScIHR.png
This issue is specific to Safari browser and does not occur in others. Seeking assistance as this is my first encounter with a cross-browser problem.