导航栏列表宽度

Question

我现在正在创建一个导航栏，我希望导航上的主要元素的宽度是自动的，但子元素的宽度都是固定的。列表的制作方式如下：

<li>Main Element 
     <ul> 
     <li> Sub Element </li> 
     <li> Sub Element </li> 
     <li> Sub Element </li> 
     </ul> 
    </li> 

对于每个主菜单项及其子菜单项都会重复此操作。

我遇到的问题是我想CSS的子元素宽度为100px，但主要元素等于文本大小加上10px的填充左右两边。看起来我不能在没有改变两者的情况下改变它们，即使在尝试将它们分开之后也是如此。我也尝试在外部样式表中编辑ul li和li ul样式。提前感谢您的帮助。

Answer 1

ul li影响所有li的在ul下的任何级别。 ul > li仅影响ul的直接子女li。这就是所谓的一个子组合子：http://www.w3.org/TR/css3-selectors/#child-combinators

必须使用它，如果你要做到这一点，而不使用类（使用类实际上是海事组织更好的方式 - http://www.jsfiddle.net/joplomacedo/xeWA4）

诀窍是将你想要的风格在ul > li下的主菜单项上应用，然后在ul ul > li覆盖它们。这里有一个小提琴 - http://jsfiddle.net/joplomacedo/xeWA4/3/

编辑：
你其实并不需要在所有使用的子组合子。当我第一次看到你的问题时，儿童组合器出现在我的脑海里 ，我从来没有质疑他们的使用。所以，ul li覆盖ul ul li完美的作品 - 并保持简单。