CODEWITHSUNDEEP
css
Abdul Shakoor Kakar
Abdul Shakoor Kakar

Reputation: 611

main menu affect sub menu

I applied border style to my main menu li. but my sub menu li also affected from the main menu li style. here is the sample code please let me know how i can fix this.

ul.menu li {
        border-left:1px solid #fcfcfc;
        border-right:1px solid #e8e8e8;
    }

above style also rendering on my sub menu li. i don't want to use class or id i want direct style to tag. is there any way how i can stop rendering border on my sub menu.

    ul.menu ul li {
         min-width: 200px;

    }

Upvotes: 0

Views: 334

Answers (1)

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15179

If you only want to affect the direct children of the <ul> with class menu, you need to use this selector:

ul.menu > li {
    ...
}

So if you have this structure:

<ul class="menu">
    <li>One</li>
    <li>Two
        <ul>
            <li>Three</li>
        </ul>
    </li>
</ul>

Then this will style the <li> elements with contents One and Two, but not the submenu <li> with Three.

Upvotes: 1

Related Questions