How to add a hover effect to the header

[CreatorTim]

Hey guys,

How can I add a hover effect to the header on products?

I don’t want anything complicated. Just a simple hover effect for the products only.

I’d just like to add an effect where, when I hover over "Products," a small dropdown menu appears underneath, showing all my products. This way, I can simply click on a product and be redirected to it.

Here’s my store URL: 1049xn-ya.myshopify.com

And here's how I want it to look:

And if needed, here’s the link to a store that shows how I want it to look the same on mine.

https://tomnoske.store/

Thank you,
Tim

[Mateen_Asghar]

Follow this:

Step 1: Add Sub-Menu Items

1. Go to Shopify Admin > Online Store > Navigation.
2. Open your Main Menu.
3. Add items under "Products" as sub-menu items (e.g., Cinematic LUT Collection, Typewriter Template, etc.).
4. Save the menu.

Enable Hover Effect

1. Go to Online Store > Themes and click Edit Code.
2. Open the Assets folder and locate theme.css or styles.css.
3. Add this CSS at the end of the file:

/* Show dropdown on hover */
ul li:hover > ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  list-style: none;
}

ul ul li {
  margin: 5px 0;
}

Step 3: Test

1. Go to your store and hover over "Products" to see the dropdown.

Once done, test your changes by previewing your store. If everything looks good, click Publish in your Shopify theme editor.

If you need further assistance, feel free to reach out—I’d be happy to help!

[CreatorTim]

Hey, I really appreciate your help.

I successfully added a sub-menu item and added the code to base.css (I don't have styles.css or theme.css), but unfortunately, it’s not working. Nothing shows up, and there’s still an arrow next to "Products." When I click it, it gets underlined, which I don’t want. I just want the dropdown menu to appear without having to click on it.

Take a look yourself to see how it looks: https://1049xn-ya.myshopify.com/

Thank you,
Tim

[CreatorTim]

Hey, are you there? Please check the previous message, I wrote you feedback there.