Home/ Questions/Q 6976601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:31:04+00:00

I have begun writing a CSS and HTML collapsing menu system (AKA an accordion).

  • 0

I have begun writing a CSS and HTML collapsing menu system (AKA an accordion). I followed the tutorial posted here, however, I had to change it slightly. Instead of using <a> and <p> tags, I had to use <div> tags because I will be adding images to both ‘sections’ at a later stage. After I change the <a> and <p> tags to <div> tags, the slide-out content does not display when the mouse is hovering over the box. It is only when the mouse is moved away does the content briefly display before the ‘drawer’ retracts. I have posted my code bellow and any help would be very much appreciated.

Link to my CSS: http://cl.ly/Cuoe
Link to my HTML: http://cl.ly/Cuhf

Many Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think the problem is that your #accordion div:hover CSS rule is now catching both the item div AND the itemTitle and itemContent divs inside the item.

    In your CSS file, try replacing both instances of #accordion div:hover with #accordion div.item:hover. This will cause the rule to only apply to divs with class item.

    Edit: You could also just change it to #accordion .item:hover

    • 0