Наружный div ограничивает высоту внутреннего div. (в Chrome)

Question

У меня есть выпадающие высоты divs, которые ограничены высотой внешнего div IN CHROME. Проблема исчезла в IE, Mozilla или в любом другом браузере.

Я понятия не имею, что может привести к этому, также jsFiddle работает прекрасно ..

HTML код:

<div id="header"> 
     <div id="headercontent" > 
      <ul class="navmelist"> 
       <li><a href='default.aspx' class='navme'>ANASAYFA</a> </li> 
       <li><div class='hakkimizda'> 
         <a href="about.aspx">HAKKIMIZDA</a> 
         <div class="popup" id="pp1"> 
          <a href="about.aspx?pg=kurumsal">KURUMSAL</a> 
          <a href="randevutakip.aspx">VELİ RANDEVU SİSTEMİ</a> 
          <a href="veliyorumlari.aspx">VELİ YORUMLARI</a> 
          <a href="about.aspx?pg=yonetimkadrosu">YÖNETİM KADROSU</a> 
          <a href="about.aspx?pg=fizikigorunum">FİZİKİ GÖRÜNÜM</a> 
         </div> 
        </div> 
       </li> 
       <li> 
        <div class="hakkimizda"> 
         EĞİTİM 
         <div class="popup" id="pp2"> 
         <div class="altmenuacici"> 
          AKADEMİK 
          <div class="altmenu"> 
           <a href="education.aspx?pg=anaokulu">ANAOKULU</a> 
           <a href="education.aspx?pg=ilkokul">İLKOKUL</a> 
           <a href="education.aspx?pg=ortaokul">ORTAOKUL</a> 
           <a href="education.aspx?pg=lise">LİSE</a> 
          </div> 
         </div> 
         <a href="education.aspx?pg=sanatvespor">SANAT VE SPOR</a> 
         <a href="education.aspx?pg=basaridaegitim">BAŞARI'DA EĞİTİM</a> 
         </div> 
        </div> 
       </li> 
       <li> 
        <a href='successes.aspx' class='navme'>BAŞARILARIMIZ</a> 
       </li> 
       <li> 
        <div class='hakkimizda'> 
         KAYIT BİLGİLERİ 
         <div class="popup" id="pp3"> 
          <a href="kayit.aspx?pg=sartlar">KAYIT ŞARTLARI</a> 
          <a href="kayit.aspx?pg=erkenkayit">ERKEN KAYIT DÖNEMİ</a> 
          <a href="kayit.aspx?pg=kitapkirtasiye">KİTAP-KIRTASİYE</a> 
          <a href="kayit.aspx?pg=okulkiyafet">OKUL KIYAFETLERİ</a> 
         </div> 
        </div> 
       </li> 
       <li> 
        <a href='press.aspx' class='navme'>BASINDA BİZ</a> 
       </li> 
       <li> 
        <a href='contact.aspx' class='navme'>BİZE ULAŞIN</a> 
       </li> 
       <li> 
        <a href='OTS/' class='navme'>ÖTS</a> 
       </li> 
      </ul> 
     </div> 
    </div> 

CSS код:

#header 
{ 
    z-index:400; 
    top:5px; 
    width:100%; 
    height:45px; 
    background-color:#C8D300; 
    position:fixed; 
    box-shadow: 
    0 0 0 2px #57c267, 
    0 0 0 3px white, 
    0 0 0 5px #1b862b, 
    0px 0px 10px 5px rgba(50, 50, 50, 0.75); 
    -webkit-box-shadow: 
    0 0 0 2px #57c267, 
    0 0 0 3px white, 
    0 0 0 5px #1b862b, 
    0px 0px 10px 5px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow:  
    0 0 0 2px #57c267, 
    0 0 0 3px white, 
    0 0 0 5px #1b862b, 
    0px 0px 10px 5px rgba(50, 50, 50, 0.75); 
} 
#headercontent 
{ 
    position:absolute; 
    overflow:hidden; 
    text-align:center; 
    width:100%; 
    height:45px; 
    line-height:35px; 
    left:0; right:0; top:0; bottom:0; 
    margin:auto; 
    background-color:#C8D300; 

} 

.popup{ 
    z-index:500; 
    width:215px; 
    display:none; 
    float:none; 
    background-color:#658C35; 
    position:fixed; 
    top:50px; 
} 

.popup > a 
{ 
    padding:5px; 
    width:200px; 
    line-height:20px; 
    height:20px; 
    float:left; 
    text-align:left; 
    padding-left:10px; 
} 
.altmenu 
{ 
    z-index:99999; 
    display:none; 
    left:205px; 
    top:-25px; 
    width:130px; 
    max-height:160px; 
    background-color:#446917; 
    position:relative; 
} 
.altmenu:hover 
{ 
} 
.altmenu > a 
{ 

    background-color:#446917; 
    padding:5px; 
    width:130px; 
    line-height:20px; 
    height:20px; 
    float:left; 
    text-align:left; 
    padding-left:10px; 
} 
.altmenu > a:hover 
{ 

    background-color:#7a9f4d; 
} 
.popup > div 
{ 
    padding:5px; 
    width:205px; 
    line-height:20px; 
    height:20px; 
    float:left; 
    text-align:left; 
    padding-left:10px; 
} 

.popup > a:hover 
{ 
    background-color:rgba(255, 255, 255, 0.30); 
} 
.popup > div:hover 
{ 
    background-color:rgba(255, 255, 255, 0.30); 
} 
.navme 
{ 
    font-family:"Open Sans Semibold"; 
    color:black; 
     line-height:45px; 
     height:45px; 
     font-weight:400; 
     font-size:16px; 
     float:left; 
     float:left; 
     margin-right:20px; 
} 
.navme:hover{ 
    color:white; 
    cursor:pointer; 
} 
.hakkimizda 

{ 

    z-index:9999999999; 
    font-family:"Open Sans Semibold"; 
     color:black; 
     text-decoration:none; 
     line-height:45px; 
     height:45px; 
     float:left; 
     font-weight:400; 
     min-width:70px; 
     font-size:16px; 
     max-width:160px; 
     margin-right:10px; 
} 
.hakkimizda:hover 
{ 
    /*background-color:rgba(35, 91, 43, 0.7);*/ 
    cursor:pointer; 
    color:white; 
} 
.navmelist 
{ 
    position:relative; 
    list-style:none; padding:0; 
    z-index:400; 
    margin:0; 
} 

.navmelist > li 
{ 
    position:relative; 
    min-width:50px; 
     font-weight:bold; 

     display:inline-block; 
    max-width:120px; 
} 

И JQuery функция:

$(function() { 

     $(".hakkimizda").hover(function() { 
      $(this).find(".popup").stop().fadeToggle("fast"); 

     }); 
    }); 

    $(function() { 
     $(".altmenuacici").hover(function() { 
      $(this).find(".altmenu").stop().fadeToggle("fast"); 
     }); 
    }); 

Спасибо заранее.

Answer 1

Вы используете overflow:hidden в своем #headercontent. Просто удалите его, и выпадающее меню появится при наведении. Поскольку у вас фиксированная высота и скрытое переполнение одновременно, дети в этом родителе не будут отображаться вне указанной высоты.