"nav"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/lawnch/pen/Jbpng?depth=everything&limit=all&order=popularity&page=18&q=contact&show_forks=false" /> <style class="cp-pen-styles">* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} *:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block;} html {font-size: 100%;height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} .clear {display: block; } .clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;} /*GENERIC STYLES*/ body { background: #f2f2f2;color: #222;-webkit-font-smoothing: antialiased;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.05em;font-weight: 400;height: auto !important;height: 100%;line-height: 1.6rem;min-height: 100%;} /*NAV*/ header { background: linear-gradient(to left,rgba(54,194,182,0.96) 0,rgba(62,188,207,0.96) 100%); border-bottom: 1px solid rgba(0,0,0,.1); box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); display: block; position: fixed; width: 100%; z-index: 1000; } header > nav > ul { display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; margin: 0; padding: 0; } header > nav > ul > li { flex: 0 1 auto; margin: 0; padding: 0; position: relative; transition: all linear 0.1s; } header > nav > ul > li:hover { background: rgba(58,162,173,1); } header > nav > ul > li a + div { background: linear-gradient(to bottom,rgba(58,162,173,1) 0,rgba(62,188,207,0.96) 100%);; border-radius: 0 0 2px 2px; box-shadow: 0 3px 1px rgba(0,0,0,.05); display: none; font-size: 1rem; position: absolute; width: 195px; } header > nav > ul > li:hover a + div { display: block; } header > nav > ul > li a + div > ul { list-style-type: none; } header > nav > ul > li a + div > ul > li { margin: 0; padding: 0; } header > nav > ul > li a + div > ul > li > a { color: rgba(255,255,255,.9); display: block; font-size: .75rem; letter-spacing: 1.5px; padding: .25rem 1.5rem; text-decoration: none; text-transform: uppercase; } header > nav > ul > li a + div > ul > li:hover > a { background-color: rgba(0,0,0,.15); } header > nav > ul > li > a { align-items: flex-start; color: #fff; display: flex; font-size: 1.55rem; font-weight: 200; letter-spacing: 1px; max-width: 130px; padding: 1rem 1.5rem; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.1); transition: all linear 0.1s; } header > nav > ul > li > a > div > span { color: rgba(255,255,255,.75); display: block; font-family: Georgia, "Times New Roman", Times, serif; font-size: .7rem; font-style: italic; line-height: 1rem; max-width: 260px; } @media (min-width: 990px) { header > nav > ul > li > a { max-width: 500px; font-size: 1.7rem; line-height: 2rem; } header > nav > ul > li > a > div > span { margin: 4px 0 0; } }</style></head><body> <header> <nav role="navigation"> <ul> <li> <a href="/"> <div> Home <span>there's no place like it</span> </div> </a> </li> <li> <a href="/blog"> <div> Blog <span>my thoughts rock</span> </div> </a><div> <ul> <li><a href="#">Me</a></li> <li><a href="#">Gaming</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Web Development</a></li> </ul> </div> </li> <li> <a href="/contact"> <div> Contact <span>drop me a line</span> </div> </a> </li> <li> <a href="/forum"> <div> Forum <span>chat with others</span> </div> </a> </li> </ul> </nav> </header> </body></html>

Related: See More


Questions / Comments: