2

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

例子

我需要做什么？

4

3 回答 3

9

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/

于 2012-09-10T01:52:58.417 回答
1

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

添加

margin:0;
padding:0;

消除

position:absolute;
width:180px;

在此：#menu .dropdown

于 2012-09-10T01:51:31.523 回答
0

我认为这对于纯 CSS 是不可能的。

我试过继承，但没有用。

于 2012-09-10T01:40:28.240 回答