List

Unordered List

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>


List with Image as bullet


html remains the same but you change the CSS

List without bullet


html remains the same but you change the CSS

ul {
list-style-type: none; }


Using a List for a Menu


Place the list inside a nav  and
<nav>
list
</nav>


Next change the list from a block into an inline and remove the bullet

nav ul li{
display: inline;
list-style-type: none;
}
Now the list will be as shown below

Add the margin for the space between the menu items

 

nav li{
margin-right: 20px;
}


add the Links


add styles to the links
as it is a main menu you can remove the underline (text-decoration).

You need styles for the link, visited and hover in that order.

link - the link before it has been clicked on

visited - is after you click on the link and then return to the page

hover - is when you roll-over the link.

I have made the link and the visited the same color, red and the hover is green.

For your links in general you would have

 

a:link { }

a:visited { }

a:hover { }

 

I have added the nav to the CSS because I do not want these particular styles to affect any other links on the site. For the menu above I have:



nav a:link {
color:#f00;
text-decoration:none;

}

nav a:visited {
color:#f00;
text-decoration:none;
}

nav a:hover {
color: #990;
text-decoration:none;

}


BECAUSE I HAVE MORE THAN ONE SET OF NAVs AND LISTS ON THE SAME PAGE THE CSS DOES NOT MATCH EXACTLY THE CODE SHOWN ON THIS PAGE. IF YOU ARE GOING TO COPY AND PASTE THEN ONLY USE THE HTML AND CSS SHOWN ABOVE.

Placement of nav on page