7

JSFiddle here - http://jsfiddle.net/2R36y/

Relevant span code -

CSS

nav ul li a span {
    font: 30px"Dosis", sans-serif;
    text-transform: uppercase;
    position: relative;
    left: 120px;
    width: inherit;
    height: inherit;
    display: none;
    text-align: left;
}

HTML

<nav>
    <ul>
        <li> <a href="#">
                <span>Home</span>
            </a>
        </li>
        <li> <a href="#">
                <span>About</span>
            </a>
        </li>
        <li> <a href="#">
                <span>Portfolio</span>
            </a>
        </li>
        <li> <a href="#">
                <span>Contact</span>
            </a>
        </li>
    </ul>
</nav>
1

2 Answers 2

6

One way is by using display: table-cell; and vertical-align: middle; - you can also use line-height since the <span> has a fixed height.

nav ul li a:hover span {
    font: 30px"Dosis", sans-serif;
    text-transform: uppercase;
    position: relative;
    left: 120px;
    width: inherit;
    height: inherit;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

http://jsfiddle.net/2R36y/1/

7
  • is it possible to have the span move to the right side of the image like in my example?
    – Narabhut
    Jul 31, 2013 at 1:03
  • Like this: jsfiddle.net/2R36y/3? - if so, just repeat the same for each <span>
    – Adrift
    Jul 31, 2013 at 1:05
  • In that, Home still pops up on top of the blue box, I want to pop up to the right side of the blue box, for example.
    – Narabhut
    Jul 31, 2013 at 1:06
  • It is appearing on the right side of the blue box, isn't it?
    – Adrift
    Jul 31, 2013 at 1:08
  • 1
    let us continue this discussion in chat
    – Narabhut
    Jul 31, 2013 at 1:14
0

Use display:table.

nav ul li {
    list-style: none;
    margin: 0 0 0 0;
    display: table; 
}

nav ul li a:hover span {
    display: table-cell;
    vertical-align: middle;
    background-color: #000000;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.