The HTML lists (with CSS styling) are very handy for assembling HTML designs. They are very useful when creating menus, especially for horizontal menus. You could use tables to create a horizontal menu, but tables are overrated, they load harder than divs or lists and they are not good for SEO. You could use divs, but divs are block elements and they have to be `floated` to left or right. In this case you have to specify the width of every elements in the menu. This is not good for websites having a control panel, where the user can change the contents of the menu.

The list (UL, LI) approach is more elegant and is very frequently used. In order to create menus you have to know a few key elements and properties of the lists.

When creating a list you have to reset the margin and padding, otherwise the list will not be cross-browser and the margin and padding will be different on browsers (major differences are between Firefox and Internet Explorer).


This is how you reset padding and margin. After this you can set your own padding and margin. It should be the same on every browser. Example:


For the further examples let’s use this html element:

<ul id="mydiv">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>

The default HTML list has bullets in front of every element. Let’s remove these bullets.


Do you want to use images(like arrows or dots) instead of bullets? Example:


Do you want to display the list’s elements horizontally? Example:

#mydiv li{display:inline;}