Alt Nav

by Keith Jeter

HTML

<nav>
    <ul>
        <li><a href="#">View</a></li>
        <li class="drop">
            <a href="#">You</a>
            <div class="dropdownContain">
                <div class="dropOut">
                    <div class="triangle"></div>
                    <ul>
                        <li>Plan</li>
                        <li>Account Settings</li>
                        <li>Switch Account</li>
                        <li>Sign Out</li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href="#">Help</a></li>
    </ul>
</nav>

CSS

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}


/*---------- BODY --------------------------------*/

body {
	text-align: center;
	background: #e0e0e0;
	padding-bottom: 200px;
}

a {
	text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
	width: 100%;
	height: 80px;
	background: #222;
}

ul {
	text-align: center;
}

ul li {
	font: 13px Verdana, 'Lucida Grande';
	cursor: pointer;
	-webkit-transition: padding .05s linear;
	-moz-transition: padding .05s linear;
	-ms-transition: padding .05s linear;
	-o-transition: padding .05s linear;
	transition: padding .05s linear;
}
ul li.drop {
	position: relative;
}
ul > li {
	display: inline-block;
}
ul li a {
	line-height: 80px;
	padding: 0 20px;
	height: 80px;
	color: #777;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
ul li a:hover {
	color: #eee;
}

.dropOut .triangle {
	width: 0;
	height: 0;
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid white;
	top: -8px;
	left:...