CSS - Возможно ли разделить элемент <li>?

Question

Мне просто интересно, возможно ли разделить элемент 'li'? Я хочу попытаться создать меню, в котором эффект: hover состоит из трех элементов div.

Или я не уверен, что мне нужно три деления. Все, что я хочу, это для общего: эффект парения должен иметь определенный цвет. Затем я хочу маленькое изображение в форме стрелки в центре каждого 'li'. Таким образом создается эффект наведения, который выглядит как маленькая стрелка, направленная вниз. Думаю, я здесь слишком продвинут?

Любая помощь приветствуется!

Answer 1

Вам не нужны дополнительные div-ы или что-то в этом роде, подойдет простая структура с одним прозрачным изображением PNG. Попробуйте что-то вроде этого:

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

Затем с изображением, похожим на это:

альтернативный текст http://www.ulmanen.fi/stuff/kennybones/menu.png

И CSS вот так:

#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;
}

В результате вы должны получить результат, аналогичный тому, который я получил здесь:

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

Если вы хотите использовать изображения в качестве текста в ссылках, вы можете просто добавить <span> элементы внутри тегов <a> и использовать обычные методы замены изображений (вы не можете использовать элемент <a>, как уже имеет определенный фон).

Надеюсь, это поможет.

Answer 2

Рассматривали ли вы такие вещи:

ul:hover{smthing}

ul:hover li{something}

ul:hover li a {blah}

Answer 3

Краткий ответ: да. LI является элементом «потока», что означает, что вы можете законно использовать внутри них контейнеры уровня блока, такие как:

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

А затем нацельтесь на них как:

li div.a1{}

Вы можете столкнуться с проблемами в старых браузерах, не учитывающих li: hover, но есть способы обойти это.

Answer 4

Я не уверен, что вы хотите, но когда я слышу о <li>, :hover и CSS-меню, я думаю о сложной спирали Эрика Мейера демонстрация / учебник.

Там вы можете найти подсказки, которые помогут вам решить ваш вопрос.