css - 在导航菜单中设置下拉菜单的大小

Question

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

我的 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 修复。它必须与旧浏览器兼容。

编辑 我不能硬编码每个 child 的宽度 .这是我的CSS jsfiddle

Answer 1

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