Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

How to make the menu look this way using HTML and CSS?

Hi!

I'm producing a website at the moment and got stuck with something.

I'd love my navigation bar look similarly to that one on:

http://www.guardian.co.uk/

They basically play with the link appearances etc. and I love the idea of applying a background in a separate colours. It looks fun yet its is very easy to navigate. Plus, how do I align these backgrounds to be even and fit the width of the div?

2 Answers

Relevance
  • 10 years ago
    Favorite Answer

    This is not a mouseover effect. It is simple CSS pseudo-class selectors. Here is one such that I have used:

    a:link, a:visited {

    background-color: green;

    text-decoration: none;

    color: #ffc; /* cream text */

    font-weight: bold;

    }

    a:hover {

    background-color: #000; /* black bkgrd */

    text-decoration: none;

    color: #fff; /* white text */

    }

    Note for these to work, they must be in the proper order which is Link, Visited, Hover and Active (if used, but not much use for it) Remember it as LoVeHAte

    The menu is structured as an unordered list.

    <ul>

    <li>menu item</li>

    <li>menu item</li>

    <li>menu item</li>

    <li>menu item</li>

    repeat as required.

    </ul>

    The ul in css is declared to float: left; and display: inline; ---- this is only the basic requirements. It goes on from there.

    Study CSS on line at the numerous sites that can be found.

  • 10 years ago

    It's called a "mouseover" effect.

    Google it :)

Still have questions? Get your answers by asking now.