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: http://cssarrowplease.com


    CSS Howto..

    How to use existing SVG symbols (in a file) as markers in highcharts?

    looking for a good explanation on how html gets rendered and how css effects it [closed]

    How to make dot-dash underline

    How to place the block on the top of “second” screen using CSS?

    How to apply css style for HTML element using Mootools

    How to manage css left property for fixed div

    JS/JQuery: How to switch class several times in a loop way?

    GWT - How to create a drop down menu

    How do I move this label inside my textarea?

    How to get a child element to size according to parent's min-height?

    How to use Firebug to easily find which css file defines a particular style

    How to use calc in CSS for mozilla firefox without position absolute

    How can I control the css of cloned
    with Javascript?

    How I do edit the css for just the home page on Magento?

    How do I center a Bootstrap div with a 'spanX' class?

    How to vertically and horizontally center two images inside a div on a responsive page

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    How to make display:flex work for responsiveness - Bootstrap?

    how to change li last anchor color

    Bootstrap CSS - How do I keep the search form inline with other navbar elements?

    How to disable css warning “Unknown property” in Eclipse Mars?

    How to get CSS hover menus to stay on top

    How to skew image with CSS?

    how to center two div in xs

    ASP.NET - how to retrieve CSS styles applied by javascript on page postback?

    How to avoid display block for a particular div element using css

    How to change
  • to variable width on css dropdown submenu
  • CSS: How to move contents of one div into another one

    CSS: How to get rid of the extra space of first line of a paragraph?

    How to move items left and right in an html table using css? -