MercyFlush14

Response to MercyFlush14

by Matthew Dewhurst

HTML

<nav><div id="nav-wrapper">
    <ul>
        <li><a href="#">Articles</a></li><li>
        <a href="#">Cards For Sale</a>
            <ul>
                <li><a href="#">Phantom Forces</a></li>
                <li><a href="#">Furious Fists</a></li>
                <li><a href="#">Flash Fire</a></li>
            </ul>
        </li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">About us</a></li>
    </ul>
    </div></nav><!-- nav/nav-wrapper end -->

CSS

body{ font-size: 25px; overflow-y: scroll; padding: 0; margin: 0; background-color: #000; }

nav{ background-color: #60F; }
#nav-wrapper{ width: 800px; margin: 0 auto; text-align: left; }
nav ul{ margin: 0; padding: 0; list-style-type: none; position: relative; }
nav ul li{ display: inline-block; }
nav ul li:hover{ background-color: #333; }
nav ul li a,visited{ display: block; padding: 10px; text-decoration: none; }
nav ul li a:hover{ color: #CCC; }

nav ul li:hover ul{ display: block; }
nav ul ul{ display: none; position: absolute; background-color: #333; min-width: 225px; }
nav ul ul li{ display: block; }
nav ul ul li a:hover{ color: #099; }