html - 将鼠标悬停在导航菜单上时，下面的所有内容都被向下推，但我需要它停留在其下方而不是向下推

Question

我用图片制作了一些 div，这样当它们悬停时，会出现一个导航菜单并展开原始 div。但是，当 div 展开时，它会将其下方的其他 div 向下推。我希望导航菜单和扩展的 div 只出现在它下面的其他 div 上（而不是向下推）

我玩过绝对/固定的位置，但我什么也做不了。

我用代码做了一个JS小提琴：

http://jsfiddle.net/cy3VF/

提前非常感谢！

<div  id="inbannergrid">

                            <div class="car">
                                    <span class="blockspan"> Automotive</span>
                                        <ul class="blockmenu">

                                                <li style="margin-top: 10px"><a href="lauderdale-bmw.html" target="_blank">&nbsp&nbsp&nbsp-&nbspLauderdale BMW</a></li>
                                        </ul>
                            </div>

                            <div class="realty">
                                <span class="blockspan">Realty</span>
                                            <ul class="blockmenu">
                                                <li style="margin-top: 10px"><a href="realtor.html" target="_blank">&nbsp&nbsp&nbsp-&nbspRealtor.com</a></li>
                                                <li><a href="apartments.html" target="_blank">&nbsp&nbsp&nbsp-&nbspApartments.com</a></li>
                                                <li><a href="realdeal.html" target="_blank">&nbsp&nbsp&nbsp-&nbspRealDeal.com</a></li>
                                            </ul>
                            </div>

                            <div class="weight">
                                <span class="blockspan">Weight-Loss</span>
                                    <ul class="blockmenu">
                                                <li style="margin-top: 10px"><a href="weightloss-doctoroz.html" target="_blank">&nbsp&nbsp&nbsp-&nbspDoctorOZ.com</a></li>
                                                <li><a href="weightloss-smoothies.html" target="_blank">&nbsp&nbsp&nbsp-&nbspSimpleGreenSmoothies</a></li>
                                    </ul>
                            </div>

                            <div class="furniture">
                                    <span class="blockspan">Furniture</span>    
                                            <ul class="blockmenu">
                                                <li style="margin-top: 10px"><a href="furniture.html" target="_blank">&nbsp&nbsp&nbsp-&nbspCoastalLiving.com</a></li>
                                            </ul>
                            </div>

                            <div class="hotel">
                                <span class="blockspan"> Hotels</span>
                                    <ul class="blockmenu">
                                        <li style="margin-top: 10px"><a href="priceline.html" target="_blank">&nbsp&nbsp&nbsp-&nbspPriceLine.com</a></li>
                                    </ul>
                            </div>

                            <div class="hospitals">
                                <span class="blockspan">Hospitals</span>
                                    <ul class="blockmenu">  
                                                <li style="margin-top: 10px"><a href="hospitaltwo.html" target="_blank">&nbsp&nbsp&nbsp-&nbspUCompareHealthCare</a></li>
                                                <li><a href="hospital.html" target="_blank">&nbsp&nbsp&nbsp-&nbspRightDiagnosis.com</a></li>
                                    </ul>                               
                            </div>

                        </div> <!-- END INBANNERGRID-->

和 CSS：

.car{
    width: 200px;
    height: 200px;
    background: #777777 url("../view/images/car.png") top center no-repeat;
    margin-right: 50px;
    margin-bottom: 50px;
    float: left;
    display: block;
    cursor: pointer;
    border-radius: 15px;
    border: 2px solid #777777;
}

.realty{
    width: 200px;
    height: 200px;
    background: #777777 url("../view/images/realty.png") top center no-repeat;
    margin-right: 50px;
    margin-bottom: 50px;
    float: left;
    display: block;
    cursor: pointer;
    border-radius: 15px;
    border: 2px solid #777777;
}

.weight{
    width: 200px;
    height: 200px;
    background: #777777 url("../view/images/weightloss.png") top center no-repeat;
    margin-bottom: 50px;
    float: left;
    display: block;
    cursor: pointer;
    border-radius: 15px;
    border: 2px solid #777777;
}

.furniture{
    width: 200px;
    height: 200px;
    background: #777777 url("../view/images/furniture.png") top center no-repeat;
    margin-bottom: 50px;
    margin-right: 50px;
    float: left;
    display: block;
    cursor: pointer;
    border-radius: 15px;
    border: 2px solid #777777;
}

.hotel{
    width: 200px;
    height: 200px;
    background: #777777 url("../view/images/hotel.png") top center no-repeat;
    margin-bottom: 50px;
    float: left;
    display: block;
    cursor: pointer;
    margin-right: 50px;
    border-radius: 15px;
    border: 2px solid #777777;
}

.hospitals{
    width: 200px;
    height: 200px;
    background: #777777 url("../view/images/hospitals.png") top center no-repeat;
    margin-bottom: 50px;
    float: left;
    display: block;
    cursor: pointer;
    border-radius: 15px;
    border: 2px solid #777777;

}

.hospitals:hover{
    background: #000000 url("../view/images/hospitalsyellow.png") top center no-repeat;
    border: 2px solid #fedd00;
    height: auto;   

}


.hotel:hover{
    background: #000000 url("../view/images/hotelyellow.png") top center no-repeat;
    border: 2px solid #fedd00;
    height: auto;   
}


.car:hover{
    background: #000000 url("../view/images/caryellow.png") top center no-repeat;
    border: 2px solid #fedd00;
    height: auto;   
}

.realty:hover{
    background: #000000 url("../view/images/realtyyellow.png") top center no-repeat;
    border: 2px solid #fedd00;
    height: auto;   
}

.weight:hover{
    background: #000000 url("../view/images/weightlossyellow.png") top center no-repeat;
    border: 2px solid #fedd00;
    height: auto;   
}

.furniture:hover{
    background: #000000 url("../view/images/furnitureyellow.png") top center no-repeat;
    border: 2px solid #fedd00;
    height: auto;   
}



.blockspan{
    margin-top: 145px;
    float: left;
    width: 200px;
    display: block;
    line-height: 35px;
    font-family: url('asenine'), arial, helvetica, sans-serif;
    font-size: 170%;
    text-align: center;
    color: white;

}

.blockmenu{
    background: #000000;
    width: 200px;
    height: 0;
    list-style-type: none;
    position: absolute;
    text-decoration: none;
    padding: 0;
    z-index: 100;
    display: block;
    margin-top: 175px;
}

/* .blockmenu li{
        text-decoration: none;
    float: left;
    width: 200px;
    display: block;
    line-height: 35px;
    font-family: url('asenine'), arial, helvetica, sans-serif;
    font-size: 170%;
    text-align: center;
    color: white;
    border-radius: 15px;
    z-index: 1000;
    position: relative;
    line-height: 35px;

} */

.blockmenu li{
    text-decoration: none;
    height: 30px;
    float: left;
    width: 200px;
    display: block;
    line-height: 35px;
    font-family: url('asenine'), arial, helvetica, sans-serif;
    font-size: 100%;
    text-align: left;
    color: white;
    border-radius: 15px;
    z-index: 1000;
    position: absolute;
    line-height: 35px;
    text-align: left;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: height .1s linear;
    -moz-transition: height .1s linear;
    border-radius: 15px;
}



.blockmenu ul{

    float: left;
    width: 200px;
    display: block;
    font-family: url('myriad-pro-light'), arial, helvetica, sans-serif;
    font-size: 40%;
    text-align: left;
    list-style: circle;
    opacity: 0;
    margin-top: -5px;
    font-weight: lighter;
}


.blockmenu li a{
    text-decoration: none;
    text-align: left;
    list-style: circle;
    color: white;
    opacity: 0;
    width: 200px;
}


/* -------------------------- HOVER HOSPITALS ---------------------------------*/

.hospitals:hover span{
    color: #fedd00;
}

.hospitals:hover{
    height: 250px;
}


.hospitals:hover .blockmenu li a{
    opacity: 1;
    z-index: 1;
    position: absolute;
}

.hospitals:hover .blockmenu li{
    height: 30px;
    line-height: 30px;
    z-index: 1;
    position: relative;
    display: block;
}

.hospitals .blockmenu a:hover{
    color: #fedd00;
    height: 30px;
    z-index: 1;
}


/* -------------------------- END HOSPITALS ---------------------------------*/

/* -------------------------- HOVER CAR ---------------------------------*/

.car:hover span{
    color: #fedd00;
}

.car:hover{
    height: 220px;
}


.car:hover .blockmenu li a{
    opacity: 1;
    z-index: 1;
    position: absolute;
}

.car:hover .blockmenu li{
    height: 30px;
    line-height: 30px;
    z-index: 1;
    position: relative;
    display: block;
}

.car .blockmenu a:hover{
    color: #fedd00;
    height: 30px;
    z-index: 1;
}


/* -------------------------- HOVER REALTY ---------------------------------*/

.realty:hover span{
    color: #fedd00;
    z-index: 9999;
    position: absolute;
}

.realty:hover{
    height: 280px;
}


.realty:hover .blockmenu li a{
    opacity: 1;
    z-index: 1;
    position: absolute;

}

.realty:hover .blockmenu li{
    height: 30px;
    line-height: 30px;
    z-index: 1;
    position: relative;
    display: block;
}

.realty .blockmenu a:hover{
    color: #fedd00;
    height: 30px;
    z-index: 1;
    position: absolute;

}


/* -------------------------- HOVER WeightLoss ---------------------------------*/

.weight:hover span{
    color: #fedd00;
    z-index: 9999;
    position: absolute;
}

.weight:hover{
    height: 250px;
}


.weight:hover .blockmenu li a{
    opacity: 1;
    z-index: 1;
    position: absolute;

}

.weight:hover .blockmenu li{
    height: 30px;
    line-height: 30px;
    z-index: 1;
    position: relative;
    display: block;
}

.weight .blockmenu a:hover{
    color: #fedd00;
    height: 30px;
    z-index: 1;
    position: absolute;

}


/* -------------------------- HOVER furniture ---------------------------------*/

.furniture:hover span{
    color: #fedd00;
}

.furniture:hover{
    height: 220px;
}


.furniture:hover .blockmenu li a{
    opacity: 1;
    z-index: 1;
    position: absolute;
}

.furniture:hover .blockmenu li{
    height: 30px;
    line-height: 30px;
    z-index: 1;
    position: relative;
    display: block;
}

.furniture .blockmenu a:hover{
    color: #fedd00;
    height: 30px;
    z-index: 1;
}


/* -------------------------- HOVER HOTELS ---------------------------------*/


.hotel:hover span{
    color: #fedd00;
}

.hotel:hover{
    height: 220px;
}


.hotel:hover .blockmenu li a{
    opacity: 1;
    z-index: 1;
    position: absolute;
}

.hotel:hover .blockmenu li{
    height: 30px;
    line-height: 30px;
    z-index: 1;
    position: relative;
    display: block;
}

.hotel .blockmenu a:hover{
    color: #fedd00;
    height: 30px;
    z-index: 1;
}

/* -------------------------- END HOTELS ---------------------------------*/

/* -------------------------- HOVER HOTELS ---------------------------------*/


.hotel:hover span{
    color: #fedd00;
}

.hotel:hover{
    height: 220px;
}


.hotel:hover .blockmenu li a{
    opacity: 1;
    z-index: 1;
    position: absolute;
}

.hotel:hover .blockmenu li{
    height: 30px;
    line-height: 30px;
    z-index: 1;
    position: relative;
    display: block;
}

.hotel .blockmenu a:hover{
    color: #fedd00;
    height: 30px;
    z-index: 1;
}

/* -------------------------- END HOTELS ---------------------------------*/




#bottomexperiences{
    width: 100%;
    position: absolute;
    margin: -600 auto;
    height: 600px;
    opacity: 0;
    z-index: -999;
}


.openmorebutton{
    margin: 0 auto;
    width: 100%;
}

.openmorebutton img:hover{
    cursor:pointer;
}



#inbannergrid{
    width: 715px;
    margin: 0px auto;
    position: relative;

}

#open{
    margin: 0 auto; 
    width: 300px; 
    height: 40px; 
    color: white; 
    border-radius: 12px; 
    display: block; 
    position: relative; 
    font-size: 130%; 
    font-weight: normal; 
    cursor: pointer;
    border: 2px solid white;
    background: none;
    z-index: 9999;
}

#open:hover{
    color: #fedd00;
    border: 2px solid #fedd00;
}

#explanation{
    font-size: 135%;
    text-align: center;
    width: 750px;
    margin: 0 auto;
    display: block;
    font-family: url('myriad-pro-light'), arial, helvetica, sans-serif; 
}

#exitbutton{
    position: absolute;
    top: 20px;
    right: 20px;
    background: url("../view/images/exit.png") top center no-repeat;
}

Answer 1

好的，您的代码确实很乱（我在开玩笑，也许您没有经验），但是我尝试清理它并举例说明它有点乱，但我尝试维护您的代码。特别看一下 CSS，您现在所要做的就是为您的每个项目复制一些特定的类并在 html 中进行更改。我希望它可以成为你的一个很好的指南。

http://jsfiddle.net/cy3VF/53/

主要错误是处理 :hover 你不必修改 div 的高度，你只需要管理

display:block and display:none

此外，使用

position:absolute

确保他的父母有

position:relative