Güzel Bir Menü Örneği

Css kodları

       @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
        html{
          height:100%;
        }
        body{
          text-align:center;
          background:#fff;
              -webkit-background-size: cover;
            -moz-background-size: cover;
            background-size: cover;
          background-position:50% 50%;
          height:100%;
          font-family: 'Open Sans Condensed', sans-serif;
        }
        body:before {
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        
        #menu{
            display: inline-block;
          height:135px;
          width:80%;
            vertical-align: middle;
          white-space: nowrap;
        }
        #menu li {
        position: relative;
        z-index: 2;
        display: block;
        float: left;
        width: 15%;
        height: 135px;
        line-height: 220px;
        margin-right: 1.42857%;
        white-space: nowrap;
        background-position: 50%;
        }
        .rocket {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinsIhUOAAef6OLIcXtsli_K2AavxTNQ4Bmq-o03bx-LEh-_j5bfoY3W1V8QwI1c8cfdwezhV3H1PpV9exzosqiN11tXtJwszyafRizh9P1xv31axaNYFXJQRbv3TX1TCj0wjllCl1MMyPg/s0/rocket-large.png')no-repeat;
        margin-left: 1.42857%;
        }
        .wine{
          background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxxylGJWRsRERDNFpb53cL61e-ofZ1mdn99BUpTiL0aQ3y32Vl1I_GymKaP-aH7yc-C7HGZ9Tf6lcVd6GqZ6tZOsfgqTACN7aNLIxrreW19Q5HKhsBoV21M83of9BCReep9QVCRRN0iEx/s0/wine-large.png')no-repeat;  
        }
        .burger{
          background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49GmT11c6R76eGyMwt1wFkECKe_I08-ePlvvCsAhtFkGB7c7aR9CcFskRlbwBqVG07mTaFhdy0W9P416ctPMZgWgu_3bkDicAKDUhQmu_aPLqL0Whxlp0H0rTrYVyOPFqNOa4elBwmGWq/s0/burger-large.png')no-repeat;
        }
        .comment{
          background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjInuwSd99523vxXfYCkIByLFAWFEWfO79ZJ4EDXNDRXE3KKLreLSGJ1d66T9zp-B9kn_9Ji_lVOljW5TW0blK4eWnA_k_AHlMo5XVfJC13Zi3fB5FwFike1SVHBQawm2G-UVZ14JVwCoXi/s0/comment-large.png')no-repeat;
          
        }
        .sport{
          background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuFI900o0mcb8qiFsNGNRdthRqHlcmoY7Iwe34D7923TZQ-Pw0kaIyibwvveBts6RR3UaiGHvVi5zaY5BmamKdDSa1nnbznlsXKyxFewaq4zcdHhfaA-nQTFIKtG-Ui_IgsCICPw7SBC4Y/s0/sport-large.png')no-repeat;
          
        }
        .earth{
          background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFkKjs4m1X0ARyK3qdvb6jVMZEerX0j48iQMN9-iMWmbT2VvhXkQ1lEg1fHKDKYYgyQygDgkecdokMCjHMSjnarb38GBzhJe00trH3MIxmD4IrIWAyl8kN8egwUbB1Bxv88VskEwzUO66/s0/earth-large.png')no-repeat;  
        }
        #menu ul{
          position:relative;
        }
        #menu ul:after{
          content:"";
          display:block;
          clear:both;
        }
        #menu a{
          color:#D8D8D8;
          text-decoration:none;
          display:block;
          width:100%;
          height:100%;
          text-shadow: 0 -1px 0 #000;
        }
        #menu li:after {
        content: "";
        width: 9.5238%;
        height: 100%;
        position: absolute;
        top: 0;
        right: -9.5238%;
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHX59OQ0GFrPQ1cMTGWUd7zzNn-2ZSP5dYRUBe50OMVCahXZ6HgXnQmkAFQtxPUD8_t6qCgANLqVfrN7V6Yx8tUwhCrlkPsSZ7dk1RRFZyZewHWwqVb7YM0vJpg5et8u-dsdMF1VwSdzn/s0/menu-bg.png');
        }
        .rocket:before {
        content: "";
        width: 9.5238%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -9.5238%;
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHX59OQ0GFrPQ1cMTGWUd7zzNn-2ZSP5dYRUBe50OMVCahXZ6HgXnQmkAFQtxPUD8_t6qCgANLqVfrN7V6Yx8tUwhCrlkPsSZ7dk1RRFZyZewHWwqVb7YM0vJpg5et8u-dsdMF1VwSdzn/s0/menu-bg.png');
        border-radius: 5px 0px 0px 5px;
        }
        .earth:after{
          border-radius:0px 5px 5px 0px;
        }
        .current{
          position:absolute;
          top:-13px;
          left:8.92857%;
          margin-left: -49px;
          width:95px;
          height:165px;
          -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
        -moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
        -o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
        -ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
        transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);
        }
        .current-back{
          width:100%;
          height:100%;
          position:absolute;
          background:#00adef;
          border-radius:5px;
          border-bottom: 2px solid rgba(0, 0, 0, 0.09);
          border-top: 2px solid rgba(255,255,255,0.1);
        }
        .top-arrow{
          position:absolute;
          overflow:hidden;
          width:100%;
          height:12px;
          top:13px;
          left:0;
          z-index:2;
        }
        .top-arrow:before{
          content:"";
          position:absolute;
          width:80%;
          height:10px;
          top:-10px;
          left:10%;
          border-radius:20%;
          box-shadow:0 0 10px black;
        }
        .top-arrow:after{
          content:"";
          position:absolute;
          width:0;
          height:0;
          top:0px;
          border-top:8px solid #00adef;
          border-left:6px solid transparent;
          border-right:6px solid transparent;
          margin-left:-6px;
          left:50%;
        }
        
        .bottom-arrow{
          position:absolute;
          overflow:hidden;
          width:100%;
          height:12px;
          bottom:17px;
          left:0;
          z-index:2;
        }
        .bottom-arrow:before{
          content:"";
          position:absolute;
          width:80%;
          height:10px;
          bottom:-10px;
          left:10%;
          border-radius:20%;
          box-shadow:0 0 10px black;
        }
        .bottom-arrow:after{
          content:"";
          position:absolute;
          width:0;
          height:0;
          bottom:0;
          border-bottom:12px solid #00adef;
          border-left:8px solid transparent;
          border-right:8px solid transparent;
          margin-left:-8px;
          left:50%;
        }
        
        .wine:hover ~ .current{
          left: 25.5%;
        }
        .burger:hover ~ .current{
         left: 42%;
        }
        .comment:hover ~ .current{  
           left: 58.5%;
        }
        .sport:hover ~ .current{
          left: 75%;  
        }
        .earth:hover ~ .current{
          left: 91.1%; 
        }

Html Kodları

<html>

<head>
    <meta charset='UTF-8'>
    <meta name="robots" content="noindex">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
   
    <script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
</head>

<body>
    <nav id="menu">
        <ul>
            <li class="rocket"><a href="https://www.bloggeriz.com/">Item menu 1</a>
            </li>
            <li class="wine"><a href="https://www.bloggeriz.com/">Item menu 2</a>
            </li>
            <li class="burger"><a href="https://www.bloggeriz.com/">Item menu 3</a>
            </li>
            <li class="comment"><a href="https://www.bloggeriz.com/">Item menu 4</a>
            </li>
            <li class="sport"><a href="https://www.bloggeriz.com/">Item menu 5</a>
            </li>
            <li class="earth"><a href="https://www.bloggeriz.com/">Item menu 6</a>
            </li>
            <div class="current">
                <div class="top-arrow"></div>
                <div class="current-back"></div>
                <div class="bottom-arrow"></div>
            </div>
        </ul>
    </nav>
</body>

</html>

Demosunu İnceleyebilirsiniz.https://codepen.io/bloggeriz/full/dyvMNVV