# Help with transparent menu

**URL:** <https://community.hubspot.com/t/help-with-transparent-menu/130162>\
**Category:** CMS Development\
**Tags:** enterprise\
**Created:** [April 18, 2025, 2:38pm UTC](https://community.hubspot.com/t/help-with-transparent-menu/130162 "2025-04-18T14:38:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TaylorLioy](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@TaylorLioy](https://community.hubspot.com/u/TaylorLioy)\
**Post date:** [April 18, 2025, 2:38pm UTC](https://community.hubspot.com/t/help-with-transparent-menu/130162/1 "2025-04-18T14:38:54Z")

</div>

I need help with making the hover not transparent on the dropdown menu I created in the header hat menu in the top right. When someone scrolls over the glove icon, the options are shown, but the background is transparent and they can’t read the dropdown options. Can you please help with this too? [https://www.encoder.com/](https://www.encoder.com/)

---

<div class="post-metadata">

**Author:** ![DilionSmith](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dilionsmith/32/29528_2.png) [@DilionSmith](https://community.hubspot.com/u/DilionSmith)\
**Post date:** [April 18, 2025, 2:44pm UTC](https://community.hubspot.com/t/help-with-transparent-menu/130162/2 "2025-04-18T14:44:24Z")

</div>

Hey Taylor here’s a code snippet that can help you

```lia-code-sample
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
background-color: #ffffff;
}

```

---

<div class="post-metadata">

**Author:** ![Josh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/josh/32/17115_2.png) [@Josh](https://community.hubspot.com/u/Josh)\
**Post date:** [April 18, 2025, 2:49pm UTC](https://community.hubspot.com/t/help-with-transparent-menu/130162/3 "2025-04-18T14:49:02Z")

</div>

Hi @TaylorLioy,

It looks like that dropdown is just inheriting the transparent background because there isn’t anything explicitly set for that. You may have to play around with this a bit, but try this in your CSS:

```lia-code-sample
/*Background for the hat menu dropdown*/
.header__hat .menu-item-has-children .sub-menu {
 background-color: #fff !important;
 padding: 10px;
 border-radius: 4px; /* matches site standard */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* matches existing elements */
 z-index: 999;
}
/*Link style for the hat menu dropdown*/
.header__hat .sub-menu a {
 color: #000;
 padding: 8px 12px;
 display: block;
 text-decoration: none;
}
/*Hover state for the hat menu dropdown*/
.header__hat .sub-menu a:hover {
 background-color: #f0f0f0;
}

```

I hope this gets you going in the right direction!

Josh

---

<div class="post-metadata">

**Author:** ![TaylorLioy](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@TaylorLioy](https://community.hubspot.com/u/TaylorLioy)\
**Post date:** [April 21, 2025, 3:11pm UTC](https://community.hubspot.com/t/help-with-transparent-menu/130162/4 "2025-04-21T15:11:57Z")

</div>

You saved me and my sanity. THANK YOU!!!