body { /*part3*/ background-color: #9999ff; margin: 0px; padding: 0px; } nav { /*Positioning and no-scroll tricks*/ position: sticky; top: 0px; /*Stupid fix for a stupid bug*/ left: 0px; width: 100%; border: 1px solid; display: inline-block; background-color: #9999ff; } main { /*Another stupid fix for another stupid bug. If you use position:fixed, it just vanishes from its original spot and there's no standard syntax for telling it to not do this; to leave a blank space where it was instead.*/ /*Yay, fixed by position:sticky*/ /*margin-top: 40px;*/ /*Hmm: https://www.w3schools.com/cssref/func_attr.asp*/ /* Made in 2 minutes (including login+open) to demonstrate efficiency vs advanced libraries. Make of that what you will. */ background-color: #cccccc; width: 80%; margin-left: auto; margin-right: auto; border: 2px solid; text-align: center; } main * { text-align: center; } ul.nav { list-style-type: none; margin: 0; padding: 0; } li.navpiece { /* Another stupid fix for YET ANOTHER stupid bug. This is how you vertically align text in an element.*/ max-width:100px; display:table; float:left; position:relative; } a.navpiece, div.navpiece { text-decoration-line:none; display: table-cell; text-align: center; vertical-align:middle; font-size: 16px; /* This wasn't actually doing anything, apparently.*/ padding: 10px; /*part1*/ color: #0000ff; background-color: #cccccc; } /*a,a:hover { style: none; color: inherit; text-decoration: none; } I might need this again later, but for now, it's okay...*/ a.navpiece:hover { /*part2*/ background-color: #0000ff; color: #cccccc; } li.navpiece>div { display:none; position:absolute; top:100%; left:0%; width:100%; text-align:center; } li.navpiece:hover>div { display:inline; } li.right { float:right; } h1 { text-align:center; } .foot { background-color: #cccccc; float: right; margin-left: auto; margin-right: auto; border: 2px solid; text-align: center; }