Support » Themes and Templates » Adding a Character to Seperate Menu Items using CSS (but not on the submenus)

  • Resolved invot

    (@invot)


    I’ve been using that ‘ol CSS trick (content: “”;) to add a “|” after menu items in my menu. However, I have dropdown menus which look really silly with a divider. Here’s my fancy-smancy CSS:

    #top-menu li:after {
    	content: "|";
    }
    
    #top-menu li:last-child:after {
    	content: "";
    }
    
    #top-menu ul li:children:after {
    	content: "";
    }

    So far, the first two functions are workin’ without a hitch. That third fella is what’s causing me to pull at my hair. Right now, it does the absolute equivalent of nothing. I’ve also tried:

    #top-menu li:children:after {
    	content: "";
    }

    This also did nothing.

    Anyone willing to offer up some enlightenment on this issue?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Assuming you are targeting the correct elements, try content: none;.

    If that doesn’t work please provide a link to your site.

    You are enforcing my fear that I am, indeed, targeting the wrong elements. Does anyone know the class/id of children list items(AKA, submenu items)?

    Here’s the link you wanted Andrew. Thanks for the tip:

    http://bit.ly/RiPr61

    Looks like children is a class — it’s not a pseudo-element. So try changing the : to .

    WPyogi, if you happen to be a fairly attractive woman, I would kiss you. Otherwise, you get my thanks! Here’s the working code:

    #top-menu li:after {
    	content: "|";
    }
    
    #top-menu li:last-child:after {
    	content: "";
    }
    
    #top-menu ul.children li:after {
    	content: none;
    }

    LOL – that’s sweet! Glad to help – especially with such a lovely site and beautiful mission/sentiment. Best to all involved with the project.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding a Character to Seperate Menu Items using CSS (but not on the submenus)’ is closed to new replies.