如何使下拉菜单与自动宽度保持顶级类别的宽度相同

Question

我有一个由嵌套的ul列表组成的导航菜单,如下所示:

<ul id="menu">
    <li class="category top_level">
         <a href="#" class="category_name top_level_link">top level 1</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">item 1</a>
            </li>
            <li class="item ">
                <a href="">very long name of item 2</a>
            </li>
        </ul>   
    </li>
    <li class="category top_level">
        <a href="#" class="category_name top_level_link">longer top level name 2</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">very long name of item 3</a>
            </li>
            <li class="item ">
                <a href="">item 4</a>
            </li>
        </ul>   
    </li>                  
</ul>  

目前的css是:

    #menu ul{list-style-type:none;}
#menu li.top_level{vertical-align:top;zoom:1;display:inline;margin:2px;padding:0 1px 0 0;}
#menu .dropdown{float:none;z-index:100;position:absolute;width:180px;height:0;overflow:hidden;-webkit-transition:height 700ms;-moz-transition:height 700ms;}
#menu .category:hover .dropdown,#menu .category:focus .dropdown{-webkit-transition:height 940ms;-moz-transition:height 940ms;}
#menu .item a,#menu .category a,#menu .category a:visited,#menu .item a:visited{-webkit-transition:background-color 940ms;-moz-transition:background-color 940ms;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1em;text-decoration:none;display:block;font-family:ColaborateLightRegular;color:#555;padding:.6em;}
#menu a.top_level_link{color:#555;background:none;padding:.4em .6em;}
#menu .dropdown a{text-align:left;}
#menu .item a:hover,#menu .category a:hover,#menu .item a:focus,#menu .category a:focus{text-decoration:none;-webkit-transition:all 0;-moz-transition:all 0;background:#d9d2d2;}
#menu .selected a{background:#d4d2d2!important;}

顶级类别和列表的长度不同.我希望下拉项目的宽度与顶级类别相同.顶级类别在css中具有'width:auto'.当宽度继承到下拉列表时,它们将宽度继承为"auto",而不是继承顶层的实际宽度.我怎样才能解决这个问题？这是我想要的与我拥有的相符的图片:

我需要做什么？

Answer 1

1:请格式化你的CSS.
2:该代码似乎缺少实际使其工作的位？

现在的答案是:
一般概念:您应该将子元素(.dropdown)设置为width:100%,并且您的父元素(.top_level)应该已position:relative;设置.
这意味着孩子们的绝对定位将相对于父母进行(这与定位如何解释你的愿望有关.),然后他们的宽度将被设置为与父母的宽度相同.好极了!

当然,这实际上并不起作用 - 我相信因为你display:inline在那里的顶层.我已将您的父元素更改为display:block;,然后使它们浮动以使它们再次彼此相邻.

[您也可以使用display:inline-block;而不是浮点数来执行此操作,具体取决于您实际需要的行为类型]

请参阅修订(缩进)css:

#menu li.top_level{
  vertical-align:top;
  zoom:1;
  display:block;
  float:left;
  width:auto;
  position:relative;
  margin:2px;padding:0 1px 0;
}

#menu .dropdown{
  float:none;  
  z-index:100;
  position:absolute;
  width:100%;
  height:0;
  overflow:hidden;
  -webkit-transition:height 700ms;-moz-transition:height 700ms;
}

#menu .category:hover .dropdown,#menu .category:focus .dropdown{
  -webkit-transition:height 940ms;
  -moz-transition:height 940ms;
  height:auto;
}

如果你想看一下,我还在jsfiddle上抛出了一个演示来解决这个问题:http://jsfiddle.net/UPRAc/1/