Member Avatar for jcomputing
jcomputing 0 Newbie Poster

Does anyone know how a can blend a menu bar button in to the same colour as the drop down menu. removing bottom border of the button and the top part of the menu where the button and the menu join together wehn button is hovered or selected.

  • 1 Contributor
  • 0 Replies
  • 94 Views

Dani AI

Generated

— common, solvable issue. The cleanest result comes from treating the button and dropdown as one visual unit: give them the exact same background, remove the border on the adjoining edges, and match corner radii so there is no visible seam. Prefer changing both parts together (via a parent state or an Open class) rather than trying to hack only the button.

A minimal CSS pattern (adjust selectors to match your markup):

.menu { position: relative; display: inline-block; }

.menu-button {
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  display: none;
}

/* when open: remove the touching borders and flatten corners */
.menu.open .menu-button { border-bottom: none; border-radius: 4px 4px 0 0; }
.menu.open .dropdown { display: block; border-top: none; }

Troubleshooting tips:

  • If you still see a 1px hairline, it is usually fractional-pixel rendering or the dropdown is not perfectly overlapped. Try top: calc(100% - 1px) or a 1px negative margin on the dropdown to overlap, but avoid hover flicker by keeping the dropdown inside the same hover/focus area or toggling an .open class with JS.
  • Make sure both elements use the exact same color code (hex or rgba) — even tiny differences show.
  • Adjust border-radius on the join corners to zero so the curve does not create a visible gap.
  • For keyboard accessibility and non-hover devices prefer toggling a visible "open" state (aria-expanded / role attributes) instead of relying only on :hover.

For CSS-only hover/focus tricks see MDN on the adjacent sibling selector and :focus-within for parent-based states:
Adjacent sibling combinator
:focus-within

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.