Eren Jaeger Youtube Comment Reply

Eren Jaeger Youtube Comment Reply

by Matthew Dewhurst

HTML

<div class="wrapper">
    
    <nav>
        <ul>
            <li><a href="#">Home</a></li><li>
            <a href="#">News</a></li><li>
            <a href="#">Gallery</a></li><li>
            <a href="#">About Us</a></li><li>
            <a href="#">Contact Us</a>
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Youtube</a></li>
                </ul>
            </li>
        </ul>
    </nav><!-- nav end -->
    
</div><!-- wrapper end -->

CSS

body{ margin: 0; padding: 0; overflow-y: scroll; font-family: Arial; font-size: 16px; }

.wrapper{ width: 1024px; margin: 30px auto; }

nav{ background-color: #666; padding: 0 25px 0 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
nav ul{ list-style-type: none; padding: 0; margin: 0; position: relative; }
nav ul li{ display: inline-block; }
nav ul li:hover{ background-color: #CF5C3F; }
nav ul li a,visited{ display: block; padding: 10px 20px 10px 20px; color: #FFF; text-decoration: none; }

nav ul li:hover ul{ display: block; }
nav ul ul{ display: none; padding: 5px 0 5px 0; position: absolute; background-color: #CF5C3F; min-width: 175px; border: 5px solid #666; border-top: 0; margin: 0 0 0 -5px; }
nav ul ul li{ display: block; }
nav ul ul li:hover{ background-color: #FFF; }
nav ul ul li a:hover{ color: #000; }