Grow your CSS skills. Land your dream job.

CSS hover nudges original text

  • # July 21, 2010 at 7:15 pm

    I’m working on a simple navigation menu that uses the -moz and -webkit border radius properties. I noticed that once I hover over a menu item the round box appears, but it nudges the other links slightly to the right. It’s also not aligned perfectly to where it looks like a round box appeared over the link / text, but rather it appears to "pop" out, which is not the effect I’m looking for. It’s kind of difficult to explain – please check it out here:

    HTML & CSS Example

    Here’s the code below:

    Code:
    Code:
    #navigation {
    float: right;
    margin: 0px;
    padding: 98px 100px 0px 30px;
    width: 256px;
    height: 100px;
    }

    #navigation ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 320px;
    }

    #navigation li {
    float: left;
    margin: 5px 20px 5px 0px;
    padding: 0px;
    }

    #navigation a {
    color: #012245;
    font: bold 1.5em Tahoma, Sans-Serif;
    display: block;
    }

    #navigation a:hover {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    background: #45accd;
    border: 1px solid #45accd;
    color: #fff;
    margin: 0px;
    padding: 2px;
    }

    Some of the navigation code might look strange like the widths & padding. This navigation menu is going to be part of a header and page wrap that has a 1000px width. I just took the navigation code and put it here. Please let me know if you need the code for the whole website.

    I know I’m missing something, I just can’t for the life of me figure it out. If someone can explain what’s going on, I’d appreciate it ten-fold.

    Thanks in advance!

    - z^2

    # July 21, 2010 at 8:22 pm

    Add a width (floated elements should specify a width) and text-align: center to #navigation li

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".