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

我有一个导航菜单，由嵌套的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中具有“宽度：自动”。当宽度继承到下拉列表时，它们将作为“自动”继承宽度，而不是继承顶层的实际宽度。我怎样才能解决这个问题？以下是我想要的与我拥有的对比图：

---

我需要做什么？

我认为这在纯css中是不可能的

---

我尝试了inherit，但没有成功。

我想当我这样做时，我会得到您想要的结果：

添加 去除

---

在此：#菜单。下拉列表

1：请格式化css。
2：那个代码似乎缺少了真正使它工作的位

至于答案：
一般概念：应将子元素（.dropdown）设置为

宽度：100%

，父元素（.top_level）应具有

位置：相对设置

这意味着子对象的绝对定位将相对于父对象进行（这与定位方式的奇怪有关），然后将其宽度设置为与父对象的宽度相同。耶

当然，这实际上是行不通的——我相信这是因为你的顶层显示了
display:inline
。我已将父元素更改为显示：block；，然后让它们漂浮起来，让它们重新靠在一起

[您也可以使用
display:inline block；
而不是float来执行此操作，具体取决于您实际需要的行为类型]

参见修订（缩进）css：

如果您想看一看的话，我还在JSFIDLE上提供了一个演示来处理这个问题：
这里是您迄今为止提供的代码的一部分，您可以看到它与屏幕截图完全不同。您是否能够更新JSFIDLE，以便我们确切地知道您使用的是什么代码？作为旁注，我不确定这是否是我编写下拉菜单的确切方式。隐藏东西的高度/溢出系统真的不适合我。我更倾向于使用显示：无；隐藏和显示：块；展示。
    #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;}

margin:0;
padding:0;

position:absolute;
width:180px;

#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;
}