Revision: 50173
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at August 13, 2011 12:10 by marshalletm
Initial Code
<style> /* Nav menu with drop down feature */ #navMenu { margin: 0; padding: 0; } #navMenu ul { margin: 0; padding: 0; line-height: 30px; } #navMenu li { margin: 0; padding: 0; list-style: none; float: left; position: relative; background: red; } #navMenu ul li a { text-align: center; font-family: "Comic Sans MS", cursive; text-decoration: none; height: 30px; width: 150px; display: block; color: #FFF; border: 1px solid white; text-shadow: 1px 1px 1px #000; } #navMenu ul ul { position: absolute; visibility: hidden; top: 32px; } #navMenu ul li:hover ul { visibility:visible; } /********************************/ #navMenu li:hover { background: #09F; } #navMenu ul li:hover ul li a:hover { background: #E55451; color: #000; } #navMenu a:hover { color: #000; } #rightnav { text-align: center; float: right; width: 139px; height: 400px; background-color: lightgreen; border-left: 1px dashed #000000; } /* end of nav menu */ </style> <header> <div id="buttonbar"> <div id="navMenu"> <ul> <li> <a href="#">Products</a> <ul> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> </ul> </li><!-- end main LI --> </ul><!-- end main UL --> <ul> <li> <a href="#">Services</a> <ul> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> </ul> </li><!-- end main LI --> </ul><!-- end main UL --> <ul> <li> <a href="#">Events</a> <ul> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> </ul> </li><!-- end main LI --> </ul><!-- end main UL --> <ul> <li> <a href="#">Funny Stuff</a> <ul> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> </ul> </li><!-- end main LI --> </ul><!-- end main UL --> <ul> <li> <a href="#">Contact Us</a> <ul> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> <li> <a href="#">Link Item</a> </li> </ul> </li><!-- end main LI --> </ul><!-- end main UL --> </div> </div> <div id="rightnav">This is the rightnav</div> <div id="body">This is the body</div> </div> </header>
Initial URL
Initial Description
Insert the <style> attribute into linked CSS stylesheet
Initial Title
HTML and CSS for drop down menu
Initial Tags
Initial Language
HTML