<ul> <li> <a> <div> <h2> <p> </div> </li> </ul>
There are many ways you could structure this (using div'
s and id'
s), but this is how I did mine. After this, assign id’s to pretty much everything, so you can style them with CSS. First write CSS to build the footer itself, hiding the div in the li (so only the a element is showing). In other words, use CSS to make a horizontal navigation menu that anchors to the bottom of the page. If you don’t know how to write the CSS for this, look at any Weebly theme’s HTML/CSS for the navigation menu at the top of the page to get an idea (it’s also an unordered list full of list elements that are styled to be displayed horizontally with dropdowns). Now add CSS to make the div elements inside the list elements appear upon hover (once again, Weebly themes can be used as reference, as their navigation menus also have dropdowns). The easiest way to make this work is to add CSS styling for the “hover” action of the HTML elements and modify the “display” attribute upon hovering (ex. from display:none to display:block, or something like that).