I am currently attempting to position some related icons above my main navigation menu. The goal is to change the text and icon colors when a user hovers over a specific area (the tag with large padding). Unfortunately, I am facing challenges in achieving this desired effect.
Initially, I thought using icon fonts would be the simplest solution, but they are limited to inline usage only. I then experimented with creating a new div for the icon fonts and positioning them above the main navigation, but I struggled to implement color changes upon hover over the designated area.
Another approach I tried was the rollover method, however, I encountered issues when creating a class within the tag and changing the display property to block, disrupting the navigation layout. Below is a snippet of my code:
<ul id="nav" role="navigation">
<li><a href="#">EXCERPT</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
#header {
overflow: hidden;
background-color: #F5F5F5;
border-bottom: 2px black solid;
position: relative;
}
#nav {
float: right;
position: absolute;
bottom: 0;
right: 0;
margin: 0 0 10px 0;
}
#nav li {
list-style: none;
display: inline;
font-size: 2.5em;
letter-spacing: 0.1em;
font-family: 'OstrichSansMedium';
}
#nav a {
text-decoration: none;
color: #C4C4C4;
padding: 200px 20px 15px;
}
#nav a:hover {
color: #000000;
background-color: green;
}