"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/NyannNyann/pen/cdLao?limit=all&page=75&q=gallery" /> <style class="cp-pen-styles">body{background:#333;} .main-nav{list-style:none;width:auto;margin:0px auto;z-index: 9999999999999999999;-webkit-transition:all 0.8s ease-in-out; -moz-transition:all 0.8s ease-in-out;} .main-nav li{float:left;width:150px;padding:15px 5px 15px 5px;position:relative;-moz-transition:background-color .4s ease;-o-transition:background-color .4s ease;-webkit-transition:background-color .4s ease;-ms-transition:background-color .4s ease;background:#434343} .main-nav li:hover{background:rgba(0,0,0,0.4);-moz-transition:background-color .1s ease;-o-transition:background-color .1s ease;-webkit-transition:background-color .1s ease;-ms-transition:background-color .1s ease} .main-nav a{border-top:0;display:block;position:relative;z-index:2;color:#FFF;font:bold 15px kulturista-web-1,kulturista-web-2,Serif;text-decoration:none;text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-align:center!important;padding:10px!important} .main-nav a:before{content:"";display:block;height:40px;background:url(https://1.bp.blogspot.com/-_IP6NWRJ5F8/UBVsNloH-3I/AAAAAAAADtY/--XihfeS-l8/s1600/nav-sprite.png) top center no-repeat} .ie8 .main-nav a{padding:10px!important} .main-nav span{text-align:center;font-size:9px;white-space:nowrap;display:block} .main-nav .forums a:before{background-position:center -40px} .main-nav .snippets a:before{background-position:center -80px} .main-nav .almanac a:before{background-position:center -160px} .main-nav .videos a:before{background-position:center -280px} .main-nav .gallery a:before{background-position:center -200px} .main-nav .downloads a:before{background-position:center -240px} .main-nav .deals a:before{background-position:center -120px} .home .main-nav .articles a,.single-post .main-nav .articles a,.Vanilla .main-nav .forums a,.page-template-page-snippet-cat-php .main-nav .snippets a,.page-template-page-snippet-php .main-nav .snippets a,.page-template-video-archive-php .main-nav .videos a,.page-template-video-single-php .main-nav .videos a,.page-template-page-almanac-group-php .main-nav .almanac a,.page-template-page-almanac-single-php .main-nav .almanac a,.post-type-archive-screenshot .main-nav .gallery a,.single-screenshot .main-nav .gallery a,.page-template-page-downloads-php .main-nav .downloads a,.page-template-page-deals-php .main-nav .deals a{color:#000} .main-nav li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px} .page-template-video-archive-php .main-nav .videos,.page-template-video-single-php .main-nav .videos,.main-nav .videos:hover{background:#01b0ec} .page-template-video-archive-php .main-nav .videos:before,.page-template-video-single-php .main-nav .videos:before{background:#0484b0} .home .main-nav .articles,.single-post .main-nav .articles,.main-nav .articles:hover{background:#ef7901} .home .main-nav .articles:before,.single-post .main-nav .articles:before{background:#cf7000} .Vanilla .main-nav .forums,.main-nav .forums:hover{background:#d54421} .Vanilla .main-nav .forums:before{background:#bb2904} .page-template-page-snippet-cat-php .main-nav .snippets,.page-template-page-snippet-php .main-nav .snippets,.main-nav .snippets:hover{background:#98bf0d} .page-template-page-snippet-cat-php .main-nav .snippets:before,.page-template-page-snippet-php .main-nav .snippets:before{background:#87a812} .page-template-page-almanac-group-php .main-nav .almanac,.page-template-page-almanac-single-php .main-nav .almanac,.main-nav .almanac:hover{background:#7449f1} .page-template-page-almanac-group-php .main-nav .almanac:before,.page-template-page-almanac-single-php .main-nav .almanac:before{background:#5531bf} .post-type-archive-screenshot .main-nav .gallery,.single-screenshot .main-nav .gallery,.main-nav .gallery:hover{background:#b147a3} .post-type-archive-screenshot .main-nav .gallery:before,.single-screenshot .main-nav .gallery:before{background:#922a84} .page-template-page-downloads-php .main-nav .downloads,.main-nav .downloads:hover{background:#f6b402} .page-template-page-downloads-php .main-nav .downloads:before{background:#d49b00} .page-template-page-deals-php .main-nav .deals,.main-nav .deals:hover{background:#8d8d8d} .page-template-page-deals-php .main-nav .deals:before{background:#5e5e5e} .home .main-nav .articles{-webkit-animation:nav-1 1.5s 1s ease 1;-moz-animation:nav-1 1.5s 1s ease 1} .home .main-nav .forums{-webkit-animation:nav-2 1.5s 1.1s ease 1;-moz-animation:nav-2 1.5s 1.1s ease 1} .home .main-nav .snippets{-webkit-animation:nav-3 1.5s 1.2s ease 1;-moz-animation:nav-3 1.5s 1.2s ease 1} .home .main-nav .videos{-webkit-animation:nav-4 1.5s 1.3s ease 1;-moz-animation:nav-4 1.5s 1.3s ease 1} .home .main-nav .almanac{-webkit-animation:nav-5 1.5s 1.4s ease 1;-moz-animation:nav-5 1.5s 1.4s ease 1} .home .main-nav .gallery{-webkit-animation:nav-6 1.5s 1.5s ease 1;-moz-animation:nav-6 1.5s 1.5s ease 1} .home .main-nav .downloads{-webkit-animation:nav-7 1.5s 1.6s ease 1;-moz-animation:nav-7 1.5s 1.5s ease 1} .home .main-nav .deals{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1} .main-nav li:nth-child(n+7){border-bottom:0} .main-nav-wrap{margin:-21px 0 0 -21px} .ie8 .main-nav-wrap{margin:0} .main-nav li a,.main-nav li a:hover{color:#fff;text-decoration:none} .ie8 .main-nav a:before,.ie8 .main-nav li:before{display:none}</style></head><body> <nav class='main-nav-wrap'> <ul class='main-nav group'> <li class='articles'><a href='#'>Home<span>Home Page</span></a></li> <li class='forums'><a href='#'>Blogger<span>Blogger Tricks</span></a></li> <li class='snippets'><a href='#'>TEMPLATES<span>BLOGGER TEMPLATES</span></a></li> <li class='videos'><a href='#'>Cool Tricks<span>Tricks</span></a></li> <li class='almanac'><a href='#'>Guest Post<span>Write For Us</span></a></li> <li class='gallery'><a href='#'>Sitemap<span>List Of Posts</span></a></li> <li class='downloads'><a href='#'>Tools<span>Blogger Tools</span></a></li> <li class='deals'><a href='#'>Contact<span>Contact Admin</span></a></li> </ul> </nav> </body></html>

Related: See More


Questions / Comments: