Navigation Link Hover State Margin Change

HTML & CSS
1

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! :slight_smile:


<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;

}
2

Hi DNice1702. Welcome to SitePoint. :slight_smile:

I think it will behave as you want if you change display: inline-block on the LI to float: left;

nav li {
   [COLOR="Red"] float:left;[/COLOR]
    margin:0 auto;
    }

There may be better ways, but that’s the simplest fix.

3

Thanks so much! That did it!