Question

我有一个子菜单，其行为如下：http://jsfiddle.net/jy8vz/2/。

所以，这就是我现在所拥有的：（https://www.dropbox.com/s/2b3utr4wmhcnivc/before.jpg）。

我想要一个看似如下的子菜单：（https://www.dropbox.com/s/pvam9nz68fml4da/after.jpg）。

HTML：

<div id="mainWrapMenu">
<!-- MenuBar -->
<div id="menuBarWrap">
    <div id="menuBar">
        <ul class="mainNav">
            <li><a href="index.html">Prima Pagina</a>
                <ul class="subNav">
                    <li class="subNavStyle">Click pentru a ajunge pe pagina principala in pozitia initiala.</li>
                </ul>
            </li>
            <li><a href="servicii.html">Servicii</a>
                <ul class="subNav">
                    <li class="subNavStyle">Click pentru a va familiariza cu serviciile pe care salonul nostru vi le pune la dispozitie.</li>
                </ul>
            </li>
            <li><a href="cursuri.html">Cursuri</a>
                <ul class="subNav">
                    <li class="subNavStyle">Scoala de formare.</li>
                </ul>
            </li>
            <li><a href="promotii.html">Promotii</a>
                <ul class="subNav">
                    <li class="subNavStyle">Aici poti afla promotiile si ofertele pe care ti le punem la dispozitie. Oricine poate beneficia de acestea.</li>
                </ul>
            </li>
            <li><a href="galeriefoto.html">Galerie Foto</a>
                <ul class="subNav">
                    <li class="subNavStyle">Portofoliul Salonului Estetique Studio.</li>
                </ul>
            </li>
            <li><a href="contact.html">Contact</a>
                <ul class="subNav">
                    <li class="subNavStyle">Unde ne puteti gasi si cum ne puteti contacta.</li>
                </ul>
            </li>
            <li><a href="facebook.html">Facebook</a>
                <ul class="subNav">
                    <li class="subNavStyle">Pentru actualizari in timp real, ne puteti urmari progresul pe Facebook.</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="clear"></div>
<!-- END MenuBar -->
</div>

CSS：

#mainWrapMenu { 
    width:1000px; 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background:#FFF;
}


#menuBarWrap { 
    width:auto; 
    height:52px; 
}

#menuBar { 
    width:auto; 
    position:fixed; 
}

.mainNav { 
    list-style-type:none; 
    padding:0; 
    margin:0; 
    text-align:center; 
}
.mainNav ul { 
    padding:0; 
    margin:0; 
}
.mainNav li { 
    float:left; 
    width:142px; 
    position:relative; 
}
.mainNav a { 
    text-decoration:none; 
    color:#666; 
    font-size:20px; 
    display:block; 
    line-height:52px; 
    background:url(images/buttonBgrd.jpg); 
}
.mainNav a:hover { 
    background:url(images/buttonBgrdHover.png); 
    color:#fc951e; 
}

.subNav { 
    display:none; 
    text-align:center; 
}
.subNav li  { 
    width:1000px; 
    background:#fc951e; 
}
li:hover .subNav { 
    display:block; 
}
.subNavStyle { 
    list-style-type:none; 
    text-align:center; 
}

如何达到预期效果？

Answer 1

你需要调整这些CSS类来正确处理定位（基本上你想要将subNav（.mainNav ul）绝对地放在相对于.mainNav而不是单个.mainNav li的位置上）

.mainNav { 
  /*add this*/
  position: relative 
}
.mainNav li {
  /*remove this   position: relative;   and optionally add the position:static*/
  position: static;
}
.mainNav ul {
  /*add these*/
  position: absolute;
  left: 0;
}

直播示例：JSFIDDLE

如何将子菜单对齐到容器的左侧

1 个答案: