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 remove all inherited CSS formatting for a table?

    How to place a div on right side of cascading tables - CSS

    How do I use a variable to get CSS info on an element?

    How to vertically center inline elements in CSS

    How can I align text using CSS but perform like printf in C? [closed]

    How I can add td to css style for inputs and its label?

    How to rotate image used as list type in unordered list

    How to optimize CSS file for speed

    How to make the underlines the same size in all browsers with css?

    How to make page border in print CSS for every single page

    How can I resize these divs while keeping the same layout?

    How to fade the background-image to black with CSS?

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    How do I load a CSS file with HTMLTextWriter

    How can I set my image's hover when hovering my text?

    How to change class of valid form field - jQuery form validation plugin

    How to set textbox width fit in table cell CSS

    CSS - 5 fluid columns with 6 fixed separators, how to get them to equal 100% of containing div?

    How to add CSS to all tds of a particular tr in jQuery?

    How can I make the height of a div section to automatically adapt to the height of its content?

    How do i shift the text in twitter bootstrap navbar to center?

    How to add a line break
    in
    in HTML

    css navbar how to make the text in navbar padding from top without increasing the height of the navbar

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    How to reference embedded images from CSS?

    Selenium: How to get text from within an html tag which has another tag in it

    How to set padding-left to my custom textbox in css?

    How to truly align center of two elemnts with css?

    How to align text vertically equal top CSS

    How can I use an inline style to add a shadow around the used portion of my page?