HTML+CSS: How to add arrow to horizontal menu items?

Tags: html,css

Problem :

This is how looks like the item in menu bar without hover: enter image description here

Here is with hover effect: enter image description here

And here is the arrow that I am trying to add: enter image description here

My current CSS formulas looks like:

ul.profile_menu {
    background: url('menu.png') repeat-x;
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;

    li {
        display: inline;
        a {
            float: left;
        a:hover {
            background: url('active_item.png') repeat-x;
                    height: 45px;

But how to add the arrow on the bottom of active item?

Thanks in advance

Solution :

You can generate the arrow (for current) purely using CSS itself (no CSS3 specific stuff - compatible with all browsers).

Use this site to generate the CSS you need for your arrow:

    CSS Howto..

    How to hide a
    item with CSS?

    How can I switch overlapped elements with CSS transitions?

    How can I float a bunch of divs and still get overflow?

    How can I prevent overflow from a fieldset?

    How can I align a logo AND a heading to the centre of a page?

    How to align element based on the other element that is above

    How to apply css inside a text that is either any html control or without any html control

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    How to CSS triangle at the bottom and center it in div ( Horizontal Menubar )? [closed]

    how to reverse CSS animation on second click with jQuery

    How to format a title attribute with css (setting more width)?

    css responsive design: how to improve my page ?

    CSS: how to keep my text fixed wrt to window size?

    How to construct CSS selector targeting attribute with value containing an ASCII line feed?

    How to align a menu bar using css and html? [closed]

    How can I change Github markdown background?

    On textbox focus, how can you change the background color of the element prior to it with only CSS?

    How do I make an expanding textbox?

    page breaks and css - how to skip last page?

    How to use fadeIn with css property change jquery

    How to alter ionic's nav-bar size?

    Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)

    How to dynamically add a CSS class and implement its style in JavaScript

    How to add focus on label css style

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    How to make an entire square div clickable with CSS?

    How to vertically align a DIV next to an image?

    How do you solve this Chrome button border bug?

    How to know when you have received an image in the browser?

    how to override the ice:commandLink css