Grow your CSS skills. Land your dream job.

Image Background center top of UL LI Menu

  • # March 6, 2012 at 4:14 pm

    Hi,
    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 :

    ul.arrowunderline{
    list-style-type:none;
    margin:0;
    padding:10px;
    text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
    font: bold 16px Georgia;
    }

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

    ul.arrowunderline li a{
    position:relative;
    color:black;
    padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
    text-decoration:none;

    }

    ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
    content:'';
    position:absolute;
    left:50%;
    margin-left:-75px;
    width:150px;
    height:30px;
    background:url(http://i.stack.imgur.com/TsPUi.png) center top no-repeat;
    }

    Online Demo : http://jsfiddle.net/vr7dG/3/ ( 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!

    Thanks

    # March 6, 2012 at 7:13 pm

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

    http://jsfiddle.net/vr7dG/4/

    # 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

    :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
    http://jsfiddle.net/vr7dG/6/

    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.

    Thanks.

    # March 7, 2012 at 6:14 am

    change

    ul.arrowunderline li a:hover

    to

    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 (http://jsfiddle.net/vr7dG/6/) . my problems with e.x 1 using after (http://jsfiddle.net/vr7dG/4/ .)

    Thanks

    # March 7, 2012 at 12:27 pm

    Any One Help Me :(

    # March 7, 2012 at 1:19 pm

    Like this?
    http://jsfiddle.net/vr7dG/9/

    # 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 : http://jsfiddle.net/vr7dG/12/
      Any Help,Thanks

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

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".