Nov. 1, 2018 Drop-down menu
Drop-down Menus We will create a bare bone version the drop-down menu on page 487-89. In addition to the presentation that you experienced earlier in the semester, this will give you a fundamental understanding of how it works. To learn to make fancier dropdowns, you can: Learn through tutorials, Search for “CSS3 generators” to generate automatically online. Search for dropdown menu programs. Most require you to log on or to download the software.
Starting HTML and CSS /* dont think i need <!DOCTYPE html> <html lang="en"> <head> <title>Skeleton dropdown </title> <meta charset="utf-8"> <link href="dropstyles.css" rel="stylesheet"> </head> <body> <div id ="wrapper"> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="coffee.html">Coffee</a></li> <li><a href="cuisine.html">Cuisine</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="http://www.justnowhere.com">Contact</a></li> </ul> </nav> <header> <h1>Hello World</h1> </header> <p>This is a sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. </p> </div> </body> </html> /* dont think i need header, main, nav, footer, figure, figcaption { display: block; } */ body { background-color: #66484d; } #wrapper { width: 800px; min-height: 400px; background-color: #ffe9ec; margin: auto; header { background-color: #ffd3d9 ; min-height: 125px; p { padding: 10px; nav { background-color: #bb0033; text-align: right; padding-right: 5px;
Emergency styles nav ul { list-style-type: none; margin: 0; } display: inline-block; nav li { padding: 0.5em; } display: block; nav a { text-decoration: none; nav a:visited { color: #EAEAEA; } nav a:link { color: #FFFFFF; } nav a:hover { color: #D3DBEB;} padding: 10px 20px; color: #000000; main { background-color: #ffffff; min-height: 400px; overflow: auto;