Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

main menu affect sub menu

main menu affect sub menu

Problem

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;

    }
Problem courtesy of: Ask4Tec

Solution

If you only want to affect the direct children of the

    with class menu, you need to use this selector:

    ul.menu > li {
        ...
    }
    

    So if you have this structure:

    Then this will style the

  • elements with contents One and Two, but not the submenu
  • with Three.

    Solution courtesy of: Roddy of the Frozen Peas
  • Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    main menu affect sub menu

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×