Как расположить вертикальное меню как вложенное <ul> под горизонтальным родительским элементом <li>

Question

Как расположить вертикальное меню как вложенное <ul> под горизонтальным родительским элементом <li>

0

Мы очень близки к решению этого вопроса, и нам просто нужно немного помочь связать это. Все работает нормально, но как мы получаем вложенную "ul" для отображения относительно нее родительского "li" (т.е. Непосредственно под родительским ли)?

Здесь HTML:

<ul id="continent">
        <li><a href="#">Europe</a>
            <ul>
            <li><a href="#">CountryA</a></li>
            <li><a href="#">CountryB</a></li>
            <li><a href="#">CountryC</a></li>
            </ul>
        </li>
        <li><a href="#">Middle East</a>
            <ul>
            <li><a href="#">CountryD</a></li>
            <li><a href="#">CountryE</a></li>
            <li><a href="#">CountryF</a></li>
            </ul>
        </li>
        <li><a href="#">Africa</a>
            <ul>
            <li><a href="#">CountryG</a></li>
            <li><a href="#">CountryH</a></li>
            <li><a href="#">CountryI</a></li>
            </ul>
        </li>
        <li><a href="#">Asia</a>
            <ul>
            <li><a href="#">CountryJ</a></li>
            <li><a href="#">CountryK</a></li>
            <li><a href="#">CountryL</a></li>
            </ul>
        </li>
</ul>

И вот CSS:

ul#continent{position:relative;}
ul#continent li{display:inline; list-style-type:none;}

ul#continent li ul{display:none;}
ul#continent li:hover {cursor:pointer;}
ul#continent li:hover ul{display:block; position:absolute; top:52px; margin:-20px 0 0 -10px; padding:20px; width:160px; z-index:999;}
ul#continent li:hover ul li{display:block; padding:3px 10px;}

Заранее благодарю за любую помощь!

Richard Tinkler 03 дек. 2013, в 13:19

Источник

Теги:

html

css

html-lists

2 ответа

0

Переместите position: relative от ul#continent до первого уровня li Это позволит вам позиционировать вложенную ul относительно соответствующего li

ul#continent li {
    position:relative;
}
ul#continent li:hover ul {
    left: 0;
}

Уменьшение top, margin и padding приводит к тому, что ul ближе к li.

JSFiddle

Olaf Dietsche 03 дек. 2013, в 10:38

Ещё вопросы

C Travel · Accepted Answer · 2013-12-03T10-31-00.000Z

Использовать float:left; и float:none; вместо display:inline; , А чем играть с margin или padding.

ul#continent li{float:left; list-style-type:none;}
ul#continent li:hover ul li{float:none; padding:3px 10px;}

DEMO

В демо 2 вы видите его с некоторыми background-color, width & height, margin и text-align в CSS, как это выглядит.

ДЕМО 2

Спасибо C Travel. Работает мечта. Ох, так близко .. !!
Нет проблем, Ричард! Рад был помочь!