Contentor - Tips - Menu Bullets

Adding bullets to menu entries

Bulleted menu items can be done with stylesheets. Extending the example from Simulating Roll-over Images, three lines added to the menu style class does the trick:

Example menu:

link 1 link 2 link 3 link 4

Each link has an assigned class of 'link', as defined in the style sheet.

For the built-in menu generator, use the class= 'menu' instead of 'link' and use 'menuSel' & 'a.menu:hover' in the place of 'a.link:hover' in the style sheet.

The Style Sheet:

a.link{
display: block;
width: 120px;
font: bold Arial Helvetica sans-serif;
background-color: #C6C3AD;
color: #9C0000;
text-decoration: none;
border: 1px solid #C6B7AE;
padding: 4px;
padding-left: 24px;
background-image: url(/images/bullet.gif);
background-repeat: no-repeat;
}
a.link:hover {
display: block;
text-decoration: underline;
background-color: #9C0000;
color: #FFFFFF;
}

The Menu HTML:

Note: when using 'display: block' in the style sheet, do not use <br />, <p> or <table> tags in the menu. With the new menu script (v0.950 and later) use the menu style options for a horizonal menu (Hh).