0

我有一个菜单。它有一个下拉菜单。我也希望下拉菜单的父级大小相同。

我的 HTML

<ul>
   <li class="noChild"><a href="#" class="" >MY ACCOUNTS</a></li>
    <li class="noChild "><a  href="#" >LIBRARY</a></li>
    <li class=""><a href="#">OUR DEPOSIT OFFERS </a>
    <ul>
        <li  class="dropdownSizeDn"><a  href="#">OFFERS 1 </a></li>
        <li class="dropdownSizeDn"><a  href="#">OFFERS 2</a></li>
        <li class="dropdownSizeDn"><a  href="#">OFFERS 3</a></li>
    </ul>
    <li class="noChild"><a href="#">LOGOUT</a></li>
</ul>

jQuery

jQuery("#menu1 li").hover(function(){
    jQuery(this).find('ul:first')
       .css({
           visibility: "visible",
           display: "none",
           marginLeft:"0px",
           paddingLeft:"0px"})
       .show(200);
},function(){
    jQuery(this).find('ul:first').css({visibility: "hidden"});
});

从上面的代码中，我需要为其所有子节点（“OFFERS 1”，“OFFERS 2”，“OFFERS 3”）设置相同的“OUR DEPOSIT OFFERS”宽度。在这里，我可以使用 Jquery 来完成。喜欢

jQuery('.dropdownSizeDn').css('width',widthLi + "px");

悬停在相应的父级上。但我想通过 CSS 自己设置它。有什么办法吗？我不喜欢任何css3修复。它必须与旧版浏览器兼容。

编辑 我不能硬编码每个孩子的宽度。这是我的 css jsfiddle

4

2 回答 2

0

您可以将下拉菜单中每个子项的宽度设置为与父项相同的固定宽度，即宽度：120px。

于 2013-03-02T18:26:16.907 回答
0

由于我不知道您的 CSS，因此涵盖了所有基础：

ul li ul, ul li ul li, ul li ul li a {
    width: 100%;
}
于 2013-03-02T18:43:14.680 回答