Different Triggers for CSS-based Dropdown, Accordion-like widgets.
Using the :hover and :focus pseudo classes
1st box dropdown uses DIV :hover
This dropdown will persist as long as the mouse hovers over any part of the dropdown. Summary line here should move down
Outside the DIV also should move down
2nd box dropdown also uses DIV with :hover pseudo-class
Hidden section that is in 2nd dropdown box.
3rd box dropdown uses SECTION tag containing a hidden ASIDE
which is made visible by :hover pseudo-class.
4th box dropdown uses both :hover and :focus pseudo-classes as triggers
This dropdown responds to two different pseudo-class triggers:
1)the DIV:hover trigger used in the previous DIV blocks to reveal hidden SECTIONs.
2)the DIV:focus trigger. But now hit the tab key several times until this SECTION is highlighted
- it is now using the :focus trigger and so a different CSS styling can be and is applied.
Note the switch to orange background color. This tab initiated
dropdown will persist until you hit the tab key again
or another HTML element gains focus.
Hit the tab key 4 or 5 times to trigger the 4th dropdown in bright orange