Grow your CSS skills. Land your dream job.

How to remove the arrow mark that appears in css horizontal menu??

  • # April 18, 2013 at 3:19 am

    I have created a css horizontal menu, it works fine but a right arrow appears in between each menu, can some one pls guide me???

    # April 18, 2013 at 4:31 am

    post your code or else create a pen at [codepen](http://codepen.io/ “codepen”) that demostrates your problem

    # April 18, 2013 at 5:14 am

    HTML CODE:

    CSS CODE:

    #menu{
    width:675px;
    list-style:none;
    margin:0;
    padding-top:21px;
    margin:0 auto;
    }

    #menu li{
    float:left;
    margin:0;

    }

    #menu li a{
    display:block;
    text-indent: -9999px;
    overflow: hidden;
    height:44px;

    }

    #menu li#read a{
    background: url(images/read.png) no-repeat;
    width:116px;

    }

    #menu li#speaking a{
    background: url(images/speaking.png) no-repeat;
    width:116px;

    }

    #menu li#writing a{
    background: url(images/writing.png) no-repeat;
    width:116px;

    }

    #menu li#grammar a{
    background: url(images/grammar.png) no-repeat;
    width:116px;

    }

    #menu li#vocab a{
    background: url(images/vocab.png) no-repeat;
    width:116px;

    }

    #menu li#read a:hover{
    background: url(images/read_ro.png) no-repeat;
    }
    #menu li#speaking a:hover{
    background: url(images/speaking_ro.png) no-repeat;
    }
    #menu li#writing a:hover{
    background: url(images/writing_ro.png) no-repeat;
    }
    #menu li#grammar a:hover{
    background: url(images/grammar_ro.png) no-repeat;
    }
    #menu li#vocab a:hover{
    background: url(images/vocab_ro.png) no-repeat;
    }
    .clear{
    clear:both;
    }

    #menu li#read a.current{
    background: url(images/read_ro.png) no-repeat;
    cursor:default;
    }

    #menu li#speaking a.current{
    background: url(images/speaking_ro.png) no-repeat;
    cursor:default;
    }
    #menu li#writing a.current{
    background: url(images/writing_ro.png) no-repeat;
    cursor:default;
    }

    #menu li#grammar a.current{
    background: url(images/grammar_ro.png) no-repeat;
    cursor:default;
    }
    #menu li#vocab a.current{
    background: url(images/vocab_ro.png) no-repeat;
    cursor:default;
    }

    # April 18, 2013 at 5:25 am

    Unfortunately, without the images it’s going to be hard to help.

    Do you have a link?

    # April 18, 2013 at 5:28 am

    My best guess is that the arrow is in those images.

    # April 18, 2013 at 5:59 am

    >My best guess is that the arrow is in those images.

    Ditto.

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

You must be logged in to reply to this topic.

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