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

I've got a navigation menu that is made of nested ul lists like this:

我有一个由嵌套的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>  

Current css is:

目前的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;}

The top level categories and the list different lengths. I would like the dropdown items to the same width as the top level categories. The top level categories have 'width: auto' in the css. When the widths inherit to the dropdowns, they inherit width as 'auto' rather that inheriting the actual width of the top level. How can I fix this? Here's a picture of what I want versus what I have:

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

What do I need to do?

我需要做什么?

3 个解决方案

#1

1: Format your css please.
2: That code seems to be missing the bits that actually make it work?

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

Now as for the answer:
General concept: you should set the child elements (.dropdown) to width:100%, and your parent elements (.top_level) should have position:relative; set.
This means that the absoute positioning of the children will be done relative to the parents (This is to do with the weirdness about how positioning interprets your wishes.), and then their width will be set to be the same as the parents' width. Yay!

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

Then of course, that doesn't actually work - I believe because of your display:inline on your top levels there. I've changed your parent elements to display:block;, then made them float to bring them back up next to each other again.

当然,这实际上并不起作用 - 我相信是因为你的显示:在你的顶层上线。我已经将你的父元素更改为display:block;,然后使它们浮动,使它们再次相互重叠。

[You could also do this with display:inline-block; instead of the float, depending on what kind of behaviour you actually want]

[您也可以使用display:inline-block;而不是浮动,取决于你真正想要的行为]

See revised (indented) css:

请参阅修订(缩进)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;
}

I've also thrown up a demo on jsfiddle to work on this, if you want to take a look: http://jsfiddle.net/UPRAc/1/

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

#2

i guess i am getting result whatever you wanted when i do this:

我想当我这样做时,无论你想要什么,我都会得到结果:

add

margin:0;
padding:0;

remove

position:absolute;
width:180px;

on this: #menu .dropdown

对此:#menu。dropdown

#3

I don't think this is possible with pure css.

我不认为纯css是可能的。

I've tried inherit but it didn't work.

我试过继承,但它没有用。