CSS - Is it possible to split up a <li> element?

Question

Hi, 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

I'm not certain of what you want, but when I hear of <li>, :hover and CSS menus, I think of Eric Meyer's Complex spiral demo/tutorial.

There, you may find hints to help you solve your question.

Answer 2

Have you considered stuff like this :

ul:hover{smthing}

ul:hover li{something}

ul:hover li a {blah}

Answer 3

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:

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.

Answer 4

The short answer is: yes. The LI is a 'flow' element, which means that you are free to legitimately use block level containers inside them, such as:

<li><div class="a1"><div class="a2"><div class="a3"><a href="#">Link</a></div></div></div></li>

And then target them like:

li div.a1{}

You might hit problems with older browsers not honouring li:hover, but there are ways around this.