Allie Ruth Design Navigation

by lukerichison

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<div id="border">
<nav>
    <ul>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">SHOP</a></li>
        <li><a href="#">BRIDAL</a></li>
        <li><a href="#">PORTFOLIO</a>
            <ul>
                <li><a href="">bridal</a></li>
                <li><a href="">paper</a></li>
                <li><a href="">home</a></li>
                <li><a href="">design</a></li>
            </ul>
        </li>
        <li><a href="#">STORY</a>
            <ul>
                <li><a href="">how it all started</a></li>
                <li><a href="">meet the team</a></li>
            </ul>
        </li>
    </ul>
</nav>
    <div id="content">
    <div id="slides"></div>
    </div>
</div>

CSS

body, html {height: 100%; }
#border {border: 1px solid #DCE5DD; width: 800px; height: 800px; margin: 2em auto;}

nav { margin: 2em -1em 0 0;}
nav a {text-decoration: none; color: #AAA; display: block;}
nav li { float: right; padding: 0 1em; position: relative; }
nav li a {padding: 0.5em 1em;  font-family: "Sweet Sans"}
nav li ul {position: absolute; width: 8em; left: 50%; margin-left: -4em; 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s 0.4s;}
nav li:hover ul {max-height: 20em; transition-delay: 0s;}
nav li li { float: none; font-style: italic; padding: 0.5em 1em; background-color: rgba(255,255,255,0.7);}
nav li li a {text-align: center;padding: 0;  font-family: "Lucida"}
nav li:hover > a {color: #888}
nav > ul > li:first-child {background-color: #DCE5DD; padding-left: 2em;}

nav > ul > li:first-child:after,
nav li ul:after {content:""; display:block;  width: 0; height:0;}
nav > ul > li:first-child:after {position:absolute; left:0; top: 50%; margin-top: -1.25em; border-left: 2.5em solid #FFF; border-bottom: 1.25em solid transparent; border-top: 1.25em solid transparent;}
nav li ul:after {position:relative;border-left: 4em solid transparent; border-right: 4em solid transparent; border-top: 2em solid rgba(255,255,255,0.7);}

#content{margin: 5em 1em 0 1em; border: 1px solid #DCE5DD; }
#slides {margin: 2em; height: 400px; background-color: #DCE5DD}