Aaron Tomason Aaron Tomason - 7 months ago 13
HTML Question

Parent <div> class applying options too far down the chain ( nav > ui > li affects nav > ui > li > ui > li )

I'll apologize ahead of time as my experience with HTML and CSS, is very limited.

I have a navigation class that appears to pass options too far down the chain. I don't really understand why this is happening, and I haven't had much luck in locating a reason. I was wondering if someone could explain WHY this is happening, and possibly offer a solution to prevent it from happening.

I have posted a JSFiddle and an example of what I'm talking about below.

nav > ul > li {
display:inline-block;
line-height:32px; <-- THIS LINE..
}

nav > ul > li > ul > li { <-- IS SOME HOW AFFECTING THIS CHILD CLASS
display:block;
}


When this happens it applies a line-height of 32px to both the first and second level of the navigation menu, but I can't figure out why. I have considered zeroing out the line-height in my reset.css, but I'm not sure if that is the right answer.

https://jsfiddle.net/tua083fr/2/

Thanks, and sorry if this is a dumb question.

Answer

Any reason you can't define or re-define the desired line-height further down the cascade?

    nav > ul > li > ul > li {
        display:block;
        line-height: 10px; /* HERE ! */
        }

https://jsfiddle.net/tua083fr/3/

Or, alternatively, apply your line-height to the <a> child instead of the <li> (since <li> styling is applied to all its children, including dropdown <ul> and its own <li> children) ?

nav > ul > li > a {
    line-height:32px; /* Remove this from nav > ul > li declaration */
}

https://jsfiddle.net/tua083fr/5/