CODEWITHSUNDEEP
htmlcss
user984621
user984621

Reputation: 48443

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

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

Upvotes: 0

Views: 4960

Answers (1)

techfoobar
techfoobar

Reputation: 66663

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

Upvotes: 8

Related Questions