CSS Rollover Lists (Horizontal Menu)
|
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.
|
In order to get the list items in one line we
use “inline” property for “a” element
CSS Code
#navigation ul {
list-style-type:
none;
padding: 0;
margin: 0;
}
#navigation ul li {
display: inline;
}
|
Output
 |
|
5.
|
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 ul li {
display: inline;
}
#navigation ul li a {
text-decoration: none;
}
Output
 |
|
|
6.
|
Add padding around list items so that it
looks like they are inside a box.
CSS Code
#navigation ul li {
display: inline;
}
#navigation ul li a
{
text-decoration: none;
padding: .2em 1em;
}
Output
 |
|
|
7.
|
Add background color to the list items. Also change the text
color to make it readable.
CSS Code
#navigation ul li a
{
text-decoration: none;
padding:
.2em 1em;
color: #fff;
background-color: #036;
}
Output
 |
|
|
8.
|
Add rollover color to the lists. Use
“a:hover” to set a second background color, as a rollover state.
CSS Code
#navigation ul li a
{
text-decoration: none;
padding:
.2em 1em;
color: #fff;
background-color: #036;
}
#navigation ul li a:hover
{
color: #fff; background-color: #369; }
Output
 |
|
Categories:
PHP