Navigation Link Hover State Margin Change


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:

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

nav ul {
	list-style: none; /* this removes the list marker */
nav li {
	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;

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 */
		margin-top: 5px;


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.

Thanks so much! That did it!