Question

I am creating a navigation bar right now and I want the width of the main elements on the navigation to be auto, but sub elements to all be a fixed width. The way the list is made is as such:

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

This is repeated for each main menu item and its submenu items.

The issue I am having is I want to css for the sub elements to be 100px in width, but the main elements to be equal to the text size plus 10px of padding on both the left and right. It appears I can not change one without changing both, even after attempting to make classes to separate them. I have also tried editting ul li and li ul styles in my external style sheet. Thank you in advance for all help.

Answer 1

ul li affects all li‘s at any level under an ul. ul > li only affects the li‘s that are direct children of an ul. It’s called a child combinator: http://www.w3.org/TR/css3-selectors/#child-combinators

You must use it if you are to make it happen without using classes (using classes would actually be the better way imo – http://www.jsfiddle.net/joplomacedo/xeWA4 )

The trick is applying the styles you want applied on the main menu items under ul > li and then override them at ul ul > li. Here’s a fiddle – http://jsfiddle.net/joplomacedo/xeWA4/3/

EDIT:
You actually don’t need to use the child combinator at all. Child combinators came to my mind
when I first read your question, and I kind of never questioned their use. So, ul li overridden by ul ul li works perfectly as well – and keeps it simpler.