<ul> <li><ul> не позиционируется и не соответствует размеру, как ожидалось - PullRequest
Новая
       17

<ul> <li><ul> не позиционируется и не соответствует размеру, как ожидалось

1 голос
/ 07 ноября 2011

Разметка: 

<div id="topMenu"
    <ul class="topnav">
                            <li class="misReservas"><a title="" href="#" class="misReservas"><span>MIS RESERVAS</span></a></li>
                            <li class="misOfertas"><a title="" href="#" class="misOfertas"><span>MIS OFERTAS</span></a></li>
                            <li class="miCuenta"> <a title="" href="#" class="miCuenta" id="miCuenta"><span>MI CUENTA</span></a>
                                <ul class="subnav submenuMiCuenta" style="display: none;">
                                    <li class="first"><a href="#" title=""><span>MIS PUNTOS</span></a></li>
                                    <li class="last"><a href="#" title=""><span>MI PERFIL</span></a></li>
                                </ul>
                            </li>
                            <li class="misVentajas"> <a title="" href="#" class="misVentajas"><span>MIS VENTAJAS</span></a></li>
                            <li class="nuestrosHoteles"><a title="" href="#" class="nuestrosHoteles"><span>NUESTROS HOTELES</span></a></li>
                            <li class="nuestrosPartners"> <a title="" href="#" class="nuestrosPartners" id="nuestrosPartners"><span>NUESTROS PARTNERS</span></a> </li>
                        </ul>
</div>

Соответствующий CSS для #topmenu: 

    #topmenu ul{
    list-style: none;
    display:block;
}
#topmenu li{float:left;height:50px;}
#topmenu li a{
    margin:0;
    padding:0;
    text-decoration:none;
    text-indent:0;
    background:none !important;
    width:auto;
    padding-bottom:5px;
}
#topmenu li a span{
    color: #EEEEFF !important;
    cursor: pointer;
    float: left;
    font-family: 'Cabin',Arial;
    font-size: 14px;
    height: 24px;
    letter-spacing: 0.2px;
    text-align: center;
    text-decoration: none;
    margin-top: 9px;
    padding: 15px 16px 5px 16px;
    display:inline-block;
    background:none;
}

CSS для .subNav 

#topmenu li ul.subnav {
    display: none;
    left: 0px !important;
    position: absolute !important;
    top: 50px !important;
    z-index: 1000 !important;
    width: 98.9% !important;
}
#topmenu li ul.subnav li{
    clear: both;
    display: inline;
    float: left;
    height:33px;
    margin:0px;padding:0px;
    width: 100%;
}

#topmenu li ul.subnav li a  {
    margin:0;
    padding: 0;
    float:left;
    height:33px;
    display:inline-block;
    width:100%;
    background: url("../nImg/spriteMas.png") no-repeat scroll right -430px transparent !important;
    _background:#65ABE7;
}

Проблема в том, что использование fo position:absolute;left:0px; позиция не та, на которую я рассчитываю: я ожидаю, что она будет позиционирована в соответствии со смещением .miCuenta и с учетом ее размера , но вот что я получаю:

enter image description here

Есть идеи, что я делаю не так?я не указывал ширину в пикселях или что-то еще, я думаю, что это должно быть вредно ...

1 Ответ

1 голос
/ 07 ноября 2011

Если когда-либо дать position:absolute элементу, определите position:relative для него parent.

В своем вопросе вы определяете от position:absolute до #topmenu li ul.subnav, поэтому вы должны определить position:relative дляэто parent #topmenu li

напишите так: 

#topmenu li{
position:relative;
}
...