The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Image Background center top of UL LI Menu

  • # March 6, 2012 at 4:14 pm

    I edited This menu For Horizontal menu and show image background top center of `LI`. But this not worked . Can Help me any one . Thanks
    HTML :

    CSS :

    text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
    font: bold 16px Georgia;

    ul.arrowunderline li{
    margin-right:25px; /* spacing between each menu item */

    ul.arrowunderline li a{
    padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */


    ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
    background:url( center top no-repeat;

    Online Demo : ( In fact, if we want to display this image on the top menu Upside down )

    Maybe this way I work. Is there a better way? another way!


    # March 6, 2012 at 7:13 pm

    This reply has been reported for inappropriate content.

    Not entirely sure what you’re asking
    Is this what you’re trying to achieve?

    # March 7, 2012 at 2:49 am

    Yes karlpcrowley , This is My Mean. Thanks. 1 problem: this not worked in IE6/7

    # March 7, 2012 at 3:45 am

    This reply has been reported for inappropriate content.

    :before and :after don’t work in IE6/7
    If you need it to work in these I would use the image as the background image of the anchor on hover

    Personally I don’t support anything lower than IE8 and can’t test this on Ubuntu

    # March 7, 2012 at 5:59 am

    u right! IE8+ worked. sorry but i have a big probelm: how to selected li for selected css ?! e.x:

  • Revised
  • Default is selected.


    # March 7, 2012 at 6:14 am

    This reply has been reported for inappropriate content.


    ul.arrowunderline li a:hover


    ul.arrowunderline li a:hover, ul.arrowunderline li a.selected
    # March 7, 2012 at 7:00 am

    i know ! this worked without after and your e.x 2 ( . my problems with e.x 1 using after ( .)


    # March 7, 2012 at 12:27 pm

    Any One Help Me :(

    # March 7, 2012 at 1:19 pm

    This reply has been reported for inappropriate content.

    Like this?

    # March 7, 2012 at 2:32 pm

    wow! Nice . Thanks Men. This Useful I Like This :X

    # March 14, 2012 at 9:07 am

    I have new problem. I add ddajaxtabs to my page. no i see my tab menu is selected with arrows of underline. problems is here :

      if remove id of ul this not show arrow ! so i need to this id for js function.
      see new demo :
      Any Help,Thanks

    Viewing 11 posts - 1 through 11 (of 11 total)

    You must be logged in to reply to this topic.

    There's a whole bunch of content on CSS-Tricks.

    Search for Stuff   •   Browse the Archives

    Get the Newsletter ... or get the RSS feed