Question

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;

    }

Answer 1

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.