CSS Menu Lists

CSS Menu Lists

Traditionally, lists came in two flavors: unordered lists (<ul>), and ordered lists (<ol>). With CSS you only need to use <ul>. You can specify the marker using the style attribute. Default spacing does differ among browsers. Use the <ul> tag to begin a list. Place the <li></li> (list item) tags between your opening <ul> and closing </ul> tags to create list items and Website navigations.

Marker Type

1 2 3 4 5

ul { list-style-type: disc; } <ul> <li>List item 1</li> <li>List item 2</li> </ul>

Marker Position

1 2 3 4 5 6

ul { list-style-position: outside; } ul { list-style-position: inside; } <ul> <li>List item 1</li> <li>List item 2</li> </ul>

Marker Image

When you choose to use an image for a marker, you also need to specify a type. The example below will not show the exact same result in all browsers, so use it sparingly.

1 2 3 4 5

ul { list-style-image: url(image.gif); list-style-type: disc; } <ul> <li>List item 1</li> <li>List item 2</li> </ul>

Shorthand Property

1	ul { list-style: disc outside url(image.gif); }

Remove Left Margin

1 2 3 4 5 6

ul { list-style-type: disc; padding: 0px; margin: 0px; } li { margin-left: 12px; } <ul> <li>List item 1</li> <li>List item 2</li> </ul>

CSS List Properties