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 float element next to line?

    How can I overlay a canvas over a paragraph so that its title is shown when hovering over its entirety?

    How to make a frame around CSS component from a picture source

    How to convert a xml element into url using css?

    Fonts wont change and id height wont show

    How to center horizontally a position: absolute elment on a position: fixed container

    How to create gradient background with CSS in Firefox < 3.6?

    How can add atribute to css of page on page load event

    how to toggle image in HTML-CSS? [duplicate]

    Css Tricks - How to align 4 div's

    How to scroll to particular element using CSS/JS

    css: how to force images to scale at same amount?

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to fix hover on transparent photo

    How to override previous onClick css class change (jQuery)

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    How to align contents in different containers using only css

    How to Style Social Media Links Correctly

    How to do scale to fit in my case?

    How do I apply a border around a checkbox when checked?

    HTML/CSS showing buttons online and auto going to next line

    How to get an image's height and set its parent height to auto?

    How to read a browser's unsupported CSS properties?

    How to get css div to stretch to 100% of window

    CSS Horizontal Menu is showing list bullets

    CSS rule doesn't show up in developer tools

    show loading image before the content loads through jquery or ajax

    How to prevent the button from submission the form after sending it?

    Hide all, show a class with css

    How do I align these pictures vertically?