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

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 中具有“宽度:自动”。当宽度继承到下拉列表时，它们将宽度继承为“自动”，而不是继承顶层的实际宽度。我怎样才能解决这个问题？这是我想要的与我拥有的相比的图片:

我需要做什么？

Answer 1

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

现在回答:
一般概念:您应该将子元素 (.dropdown) 设置为 width:100%，并且您的父元素 (.top_level) 应该设置 position:relative;。
这意味着 child 的绝对定位将相对于 parent 完成(这与如何定位 interprets your wishes. 的奇怪之处有关)，然后他们的宽度将被设置为与 parent 的宽度相同。耶!

当然，这实际上不起作用 - 我相信是因为您的 display:inline 在您的顶层。我已将您的父元素更改为 display:block;，然后让它们 float 以使它们再次彼此相邻。

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

查看修改后的(缩进的)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/