Aaron Tomason Aaron Tomason - 2 years ago 62
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 {
line-height:32px; <-- THIS LINE..

nav > ul > li > ul > li { <-- IS SOME HOW AFFECTING THIS CHILD CLASS

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.


Thanks, and sorry if this is a dumb question.

Answer Source

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

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


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 */


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download