Question

I’m just wondering, is it possible to split up a ‘li’ element?
I want to try to create a menu where the :hover effect is made up of three divs.

Or, I’m not sure if I need three divs. All I want is for the general :hover effect to have a certain color. Then I want a small image of an arrow like shape in the centre of each ‘li’. Thus creating a hover effect which looks like a small arrow pointing downwards.
Am I thinking a bit too advanced here?

Any help is appreciated!

Answer 1

You don’t need any extra divs or anything like that, a simple structure with one transparent PNG image will do. Try something like this:

<ul id="navi">
    <li><a href="#" id="navi-hjem">Hjem</a></li>
    <li><a href="#" id="navi-ingredienser">Ingredienser</a></li>
    <li><a href="#" id="navi-oppskrifter">Oppskrifter</a></li>
    <li><a href="#" id="navi-kalender">Kalender</a></li>
    <li><a href="#" id="navi-kontakt">Kontakt</a></li>
</ul>

Then, with a image similar to this:

alt text http://www.ulmanen.fi/stuff/kennybones/menu.png

And CSS like this:

#header {
    height: 60px;
    background: #aaa;
}

#header ul#navi {
    margin-top: 19px;
    float: right;
    list-style: none;
}

#header ul#navi li {
    float: left;
}

#header ul#navi li a {
    display: block;
    height: 52px;
    padding: 0 20px;
    font: 16px Arial;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
}

#header ul#navi li a:hover {
    background: url(menu.png) center bottom no-repeat;
}

You should end up with a result similar to what I have here:

http://www.ulmanen.fi/stuff/kennybones/

If you want to use images as the text in the links, you can just add <span> elements inside the <a> tags and use normal image replacement techniques (you can’t use the <a> element as that already has an background defined).

Hope this helps.