Hello!
This is my first post on this forum but I’ve been reading posts here for quite some time.
I am looking to apply a simple treatment to my navigation menu when a link is hovered over. For right now, I would like the individual link to move out of place a bit just so that the user notices a change.
I’ve applied a margin change via CSS for the list item when it’s in a hover state. However, when I view the page and hover over a link, the entire unordered list adjusts to the new margin specification. I’ve included my code below.
Any help would be greatly appreciated! Thanks!
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Auditions</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
nav ul {
list-style: none; /* this removes the list marker */
}
nav li {
display:inline-block;
margin:0 auto;
}
nav li a:link, nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
display: block;
text-decoration:none;
color:#006;
margin-right:10px;
}
nav li a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color:#999;
margin-top: 5px;
}