1.
|
Make a basic list using a href
property
Example
<div
id="navigation">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Countries</a></li>
<li><a
href="#">People</a></li>
<li><a href="#">About
Us</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</div>
|
Output
Home
Countries
People
About Us
Contact
|
2.
|
To remove the HTML
bullets set the “ list-style-type”
to “none”
CSS Code
#navigation ul {
list-style-type: none;
}
|
Output
Home
Countries
People
About Us
Contact
|
3.
|
Remove paddings and
margins
CSS Code
#navigation ul {
list-style-type:
none;
padding: 0;
margin: 0;
}
|
Output
Home
Countries
People
About Us
Contact
|
4.
|
Display the items in a
block. In order to achieve a rollover, the list items must be converted to
blocks
CSS Code
#navigation ul {
list-style-type:
none;
padding: 0;
margin: 0;
}
#navigation a {
display: block;
}
|
Output
Home
Countries
People
About Us
Contact
|
5.
|
Add background color to
the list items. Set the background-color property of the “a” tag. Also change
the color of the font to make it readable
CSS Code
#navigation ul {
list-style-type:
none;
padding: 0;
margin: 0;
}
#navigation a {
display: block;
color: #FFF;
background-color: #036;
}
|
Output
 |
6.
|
Set the list width with
a rule targeting “a” element so that the entire block will be active.
CSS Code
#navigation a {
display: block;
color: #FFF;
background-color: #036;
width: 9em;
}
|
Output
 |
7.
|
Add Padding to the list
items to make it look nice.
CSS Code
#navigation a {
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
}
|
Output
 |
8.
|
Remove the text
underline. Navigations do not have underlines. For this set the “text-decoration” property of the “a” element as none.
CSS Code
#navigation a {
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}
|
Output
 |
9.
|
Add a rollover color. Use “a:hover” to set a second background
color, as a rollover state.
CSS Code
#navigation a {
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}
#navigation a:hover {
background-color: #369;
color: #FFF;
}
|
Output
 |
10.
|
The list items can be
separated from one another with the following code.
CSS Code
#navigation li {
margin:
0 0 .2em 0;
}
#navigation a:hover
{
background-color: #369;
color: #FFF;
}
|
Output
 |
Categories:
PHP