Member Avatar for <M/>

I wrote an accordion menu, and for some odd reason, the arrow that shows you which link you hovered over won't show on the browser.

Unfortunately I can't post my code properly because there is a lot and it could be overwritten by something else....

I will send you guys the link :)

  • 3 Contributors
  • 3 Replies
  • 1K Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Quick, practical checklist for an arrow that shows on hover but isn’t visible in the browser. Building on 's description and ’s example, the problem is almost always CSS-related (selector, stacking, clipping, or the resource not loading). These checks can be done locally with DevTools and don’t require posting business code.

Checklist to run now:

  • Force the element into :hover in DevTools and inspect ::before / ::after; confirm content exists and the pseudo-element has size/display.
  • Look for overflow: hidden on any ancestor — that will clip an arrow positioned outside the anchor. Temporarily remove it to test.
  • Check stacking contexts: ancestors with transform, opacity, or positioned elements can hide absolutely positioned arrows even if you set z-index. Put position: relative on the list item and give the arrow a higher z-index or move the arrow inside the anchor.
  • Verify your hover selector actually matches the element receiving the hover (a:hover::before vs li:hover a::before).
  • If the arrow is an image/sprite, confirm the URL loads (Network tab) and background-position changes on hover.
  • For quick debug, add a temporary colored background or outline: 1px solid red to the pseudo-element so you can see where it renders.

Minimal CSS pattern that avoids common pitfalls:

.nav li { position: relative; }
.nav li a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #333;
  opacity: 0;
  transition: opacity .15s;
}
.nav li a:hover::before { opacity: 1; }

This puts the arrow inside the anchor’s stacking context and makes it easy to spot. If that still fails, the usual culprits are clipping (overflow), an ancestor transform, or a selector specificity issue.

Recommended Answers

All 3 Replies

Member Avatar for lps

why don't you just post the link here and people can help you faster.

Member Avatar for <M/>

I don't post the link because of a personal business matter... it'll look bad if a developer didn't know how to solve problems most of the time...

karthikreddy509, That's a good accordion, but that's not like mine.... shall i send you the link so see what kind i mean?

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.