Home/ Questions/Q 3493932
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T11:56:41+00:00

In the following picture, I have mocked up a CSS active menu styling I

  • 0

In the following picture, I have mocked up a CSS active menu styling I would like to find examples of, and hopefully replicate.

Triangle active menu

You will notice there is a triangle highlighting the active menu, and it can appear bold too.

Question 1. What is this “active menu triangle style” actually called? So I can find CSS examples of it.

Question 2. Where can I find examples of this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    All done through css classes like so:

    html

    <ul>
    <li><a href="#">Menu Item 1</li>
    <li><a href="#" class="selected">Menu Item 2</li>
    <li><a href="#">Menu Item 3</li>
    ....
</ul>

    css

    ul li a {padding: 6px; border-bottom: 1px solid #666; background-image: none; color: #454545}

ul li a.selected { background: #fff url(triangle.png) no-repeat center bottom}

    Tweak the background-position until it fits snuggly with the border.

    • 0