The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS hover nudges original text

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #29692

    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:

    #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


    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)
  • The forum ‘CSS’ is closed to new topics and replies.