980px
1
2
3
4
5
6
7
8
9
10
<!-- Begin Navigation -->
<div id="navigation">
<ul id="navigation-items">
<li><a href="statement.html">Statement</a></li>
<li><a href="resume.html">Resumé</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->

Menu States

There are four basic states that we must cover when creating our link styles (you must write them in this order):

  1. a:link: is the state of the default link
  2. a:visited: is the state when you have previously viewed that link’s page
  3. a:hover: is the state of the rollover effect for that link
  4. a:active: is the state of the link when it is being clicked
Select Code
1
2
3
4
5
6
7
#menu li a:link { color: #85898A; text-decoration: none; }

#menu li a:visited { color: #85898A; text-decoration: none; }

#menu li a:hover { color: #F20017; text-decoration: underline; }

#menu li a:active { color: #F20017; text-decoration: underline; }

See Also: Styling Links | W3 Schools

We can also create the styles to our menus with a more shorthand method as well:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#navigation-items li {
display: inline-block;
margin-right: 20px;
font-weight: bold;
list-style-type: none;
}

#navigation-items li a {
display: block;
padding-right: 30px;
color: #000;
text-decoration: none;
}

#navigation-items li a:hover {
background-image: url(images/bg-navitems-arrow.png); /* rollover image */
background-position: right;
background-repeat: no-repeat;
}

 

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php