DettolGaming Response

DettolGaming Response

by Matthew Dewhurst

HTML

<nav>
    <div id="nav-wrapper">
        <ul>
            <li><a href="#">NEW IN</a>
                <ul>
                    <h3>Mens</h3>
                    <li><a href="#">New In Clothes</a></li>
                    <li><a href="#">New In Shoes</a></li>
                    <li><a href="#">New In Accessories</a></li>
                    <h3>Womens</h3>
                    <li><a href="#">New In Clothes</a></li>
                    <li><a href="#">New In Shoes</a></li>
                    <li><a href="#">New In Accessories</a></li>
                </ul>
            </li>
            <li><a href="#">Sales</a>
                <ul>
                    <h3>Mens</h3>
                    <li><a href="#">Clothes</a></li>
                    <li><a href="#">Shoes</a></li>
                    <li><a href="#">Accessories</a></li>
                    <h3>Women</h3>
                    <li><a href="#">Clothes</a></li>
                    <li><a href="#">Shoes</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- nav-wrapper end -->
</nav><!-- nav end -->

CSS

body{
    font-family: "Arial",sans-serif;
    font-size: 17px;
    color: #000;
    margin: 40px 0 0 0;
    padding: 0;
}

#nav-wrapper{ margin: 0 auto; text-align: center; }
nav ul{ list-style-type: none; padding: 0; margin: 0; position: relative; }
nav ul li{ display: inline-block; }
nav ul li:hover{ background-color: #000; }
nav ul li a,visited{ color: #000; display: block; padding: 4px; text-decoration: none; }
nav ul li a:hover{ color: #FFF; }
nav ul > li:hover a,visited{ color: #FFF; } 

nav ul li:hover ul{ display: block; }
nav ul ul{ display: none; position: absolute; font-size: 11px; text-align: left; border-left: 3px solid #000; padding: 8px; }
nav ul ul h3{ font-size: 15px; text-transform: uppercase; margin: 8px 0 8px 0; }
nav ul ul li{ display: block; }
nav ul ul li:hover{ background-color: transparent; }
nav ul ul li a,visited{ color: #000; }
nav ul ul li a:hover{ color: #828282; text-decoration: underline; }
nav ul > li:hover ul li a,visited{ color: #000; } 
nav ul > li:hover ul li a:hover{ color: #828282; }