Indeed, you don’t need Javascript to create a dropdown menu, at least you don’t need it in principle, unless you need some more advanced functionality or special effect.
The tricky part would be how to position the dropdown element, because this part needs a bit of CSS positioning, although you solve it with the position: relative attributes on the container and position: absolute on the dropdown.
Look at this HTML code:
Lorem ipsum dolor sit amet…
Notice that the drop-down part is inside the menu that opens it, in order to position one well with respect to the other.
Now look at this CSS code, which is what gets the show/hide effect when you hover over the element that has the dropdown. See how to play with it. And how is it used to correctly select the child that is displayed.
.anchor { display: inline-block; background-color: #ffc; padding: 0.5rem 1rem; colour: #00a; font-weight: bold; position: relative; line-height: 1rem; } .dropdown { background-color: #eee; padding: 0.5rem 1rem; display: none; position: absolute; top: 2 cast off; left: 0; z-index: 1; width: 150px; } .displayable a { display: block; margin-bottom: 0.5rem; } .anchor:hover > a { color: red; } .anchor:hover .dropdown { display: block; }
Any more specific questions you can create another FAQ or comment on this one. Luck!
Facebook Comments
Disqus