Question

我有下拉divs＆＃39;受到外部div高度限制的高度。问题在IE，Mozilla或任何其他浏览器中消失了。

我不知道是什么原因造成这种情况，jsFiddle完全正常。

HTML code：

<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。只需将其删除，下拉菜单就会显示在悬停状态。由于您同时拥有固定高度和隐藏溢出，因此该父级中的子级不会出现在指定高度之外。

外部div限制内部div的高度。（在Chrome中）

1 个答案:

外部div限制内部div的高度。 （在Chrome中）

1 个答案:

外部div限制内部div的高度。（在Chrome中）