css отзывчивое меню нажмите

Попытка сделать отзывчивое меню. но меню не открывается. Я ценю вашу помощь.css отзывчивое меню нажмите

<navi>  
     <div class="gizli"><i class="fa fa-bars" style="color:#FFFFFF; border:1px solid #FFFFFF;height:60px;padding :20px;"></i> 
      <div class="clear"></div> 
      <ul> 
       <li><a href="index.html">Ana Menü<br /> <small>Ana Menü</small></a></li> 
       <li><a href="hakkinda.html">Hakkında<br /> <small>Hakkımızda</small></a></li> 
       <li><a href="proje.html">Projeler<br /> <small>Meet Our Friends</small></a></li> 
       <li><a href="hizmet.html">Hizmetlerimiz<br /> <small>See Our Work</small></a></li> 
       <li><a href="urunler.html">Ürünler<br /> <small>Hear Us</small></a></li> 
       <li><a href="teknik.html">Teknik Bilgi<br /> <small>Steal Our Stuff</small></a></li> 
       <li><a href="teklif.html">Teklif<br /> <small>Read About Us</small></a></li> 
       <li><a href="iletisim.html">İletişim<br /> <small>Email Us</small></a></li> 
      </ul> 
     </div> 
    </navi>

JavaScrip код

$(document).ready(function() { 
$(".gizli").click(function(){ 
    $(this).next("ul").slideToggle(); 
});

});

css код. минус не работает. Мои файлы css ниже

/** 
* Design Shack Respnsive Menu 
*/ 

/* navgasyon Menü */ 
* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
navi { right:15%; margin: 0 auto; overflow: hidden;} 

navi ul {list-style:none;overflow:hidden;padding-right:4%;padding-left:4%;} 

navi .clear{clear:both;} 
navi li a { 
    background: #444; 
    border-right: 1px solid #fff; 
    color: #fff; 
    display: block; 
    float: left; 
    font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    padding: 25px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 12.5%; 
    height:80px; 

    /*TRANSISTIONS*/ 
    -webkit-transition: background 0.5s ease; 
     -moz-transition: background 0.5s ease; 
     -o-transition: background 0.5s ease; 
     -ms-transition: background 0.5s ease; 
      transition: background 0.5s ease; 
} 

/*HOVER*/ 
navi li a:hover { 
    background: #222; 
} 

/*SMALL*/ 
navi small { 
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif; 
    text-transform: none; 
    color: #aaa; 
} 

/*BORDER FIX*/ 
navi li:last-child a { 
    border: none; 
} 

/*BLUE MENU*/ 
navi .blue { 
    margin-top: 50px; 
} 

.blue li a { 
    background: #75b1de; 
} 
/*gizli menü */ 
navi .gizli{ 
    height:0; 

} 
navi .gizli a{ 
    padding-left:0; 
} 


.blue small { 
    color: white; 
} 

.blue li a:hover { 
    background: #444; 
} 

/*RED MENU*/ 

navi .red { 
    margin-top: 50px; 
} 

.red li a { 
    background: #5C0002; 
} 

.red small { 
    color: white; 
} 

.red li a:hover { 
    background: #a60306; 
} 

/* MEDIA QUERIES*/ 
@media only screen and (max-width : 1220px), 
only screen and (max-device-width : 1220px){ 
    navi li a { 
     font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 

    navi small { 
     font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif; 
    } 

} 

@media only screen and (max-width : 930px), 
only screen and (max-device-width : 930px){ 

    navi li a { 
     width: 25%; 
     border-bottom: 1px solid #fff; 
     font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 

    navi li:last-child a, nav li:nth-child(4) a { 
     border-right: none; 
    } 

    navi li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a { 
     border-bottom: none; 
    } 
} 

@media only screen and (max-width : 580px), 
only screen and (max-device-width : 580px){ 
    navi .gizli{ 
     display:inline; 
     color:#000000; 
     height:60px; 
    } 

    navi .gizli i{ 
     padding-left:10px; 
     font-size:16px; 
     border:1 solid #FFFFFF; 
     background-color:#000000; 
     width:100%;  
    }navi .gizli i:hover{ 
     cursor:pointer; 
    } 

    navi small { 
     display:none; 
    } 

    navi ul { 
     height:40px; 
     padding-top:0; 
     padding-right:0; 
     padding-left:0; 
     color:#000000; 
     display:none; 
    } 
    navi li a { 
     font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
     display:none; 
     width:100%; 
     padding:25px; 
     height:40px;  
     color:#000000; 
    } 

    navi li:nth-child(even) a { 
     border-right: none; 
    } 

    navi li:nth-child(5) a, nav li:nth-child(6) a { 
     border-bottom: 1px solid #fff; 
    } 
} 

@media only screen and (max-width : 320px), 
only screen and (max-device-width : 320px){ 
    navi li a { 
     font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif; 
    } 
}

Проблемы, возникшие в моем файле, должны соответствовать следующему CSS-файлу. проблема в 580px. Буду рад, если вы поможете мне.

источник

2016-06-12 Kadir GÜNEY

СМИ 580 точек .mine не работает причины. Мои файлы css ниже. –