Here is the HTML content for the Main Page:
<body>
<div class="container">
<header>
<nav class="nav-items">
<ul>
<li id="li_1"><a href="index.html">First</a></li>
<li id="li_2"><a href="secondpage.html">Second</a></li>
<li id="li_3"><a href="thirdpage.html">Third</a></li>
<div class="clear">
</div>
</ul>
This section above includes the HTML code for a list of links with A tags, styled as a floating list.
</nav>
</header>
</div>
</body>
Below is the CSS styling:
*{
margin: 0px;
padding: 0px;
}
.container{
width: 1000px;
margin: 0px auto;
background-color: #c7c7c7;
}
.nav-items{
height: 40px;
background-color: #8d8b8b;
}
.nav-items ul li{
list-style-type: none;
float: left;
margin: 10px 5px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;
}
.clear{
clear: both;
}
/*a{
color: #1f9393;
transition-property: color;
transition-duration: 2s;
}
*/
The current CSS settings are functional, but there seems to be an issue with the code below:
a:link{
color: #f0ffff;
text-decoration: none;
}
a:visited{
text-decoration: none;
color: #1f9393;
transition-property: color;
transition-duration: 2s;
}
a:hover{
color: #2f2f2f;
}
a:active{
color: #3e3d3b;
}
I am attempting to have the visited link transition to the hover color, but it's not working. What could be causing this problem?