Трехуровневое меню CSS с первым слоем в горизонтальном макете - PullRequest
1 голос
/ 20 января 2011

Я хочу, чтобы верхний уровень ul li был выложен горизонтально, а затем последующие уровни выложены вертикально, желательно с небольшим отступом при понижении уровня под родительским li.

Не после какого-либо зависания, просто приятный макет, что-то вроде этого:

Top Item 1       Top Item 2      Top Item 3
 sub item 1       sub item 1      sub item 1
 sub item 2       sub item 2      sub item 2
  sub sub item 1  sub item 3      sub item 3
  sub sub item 2  sub item 4      sub item 4
 sub item 5       sub item 5      sub item 5

Ответы [ 3 ]

1 голос
/ 20 января 2011

Как насчет этого:

Демо-версия

CSS:

#footer {
    overflow: auto;
    background: #ddd
}
.outer {
    list-style: none;
    width: 33%;
    float: left;
    margin: 0;
    padding: 0
}
.first {
    font-weight: bold
}
.outer ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 18px
}

HTML:

<div id="footer">
    <ul class="outer">
        <li class="first"><a href="#">Top Item 1</a></li>
        <li>
            <ul>
                <li><a href="#">sub item 1</a></li>
                <li><a href="#">sub item 2</a></li>
                <li>
                    <ul>
                        <li><a href="#">sub item 1</a></li>
                        <li><a href="#">sub item 2</a></li>
                    </ul>
                </li>
                <li><a href="#">sub item 5</a></li>
            </ul>
        </li>
    </ul>

    <ul class="outer">
        <li class="first"><a href="#">Top Item 2</a></li>
        <li>
            <ul>
                <li><a href="#">sub item 1</a></li>
                <li><a href="#">sub item 2</a></li>
                <li><a href="#">sub item 3</a></li>
                <li><a href="#">sub item 4</a></li>
                <li><a href="#">sub item 5</a></li>
            </ul>
        </li>
    </ul>

    <ul class="outer">
        <li class="first"><a href="#">Top Item 3</a></li>
        <li>
            <ul>
                <li><a href="#">sub item 1</a></li>
                <li><a href="#">sub item 2</a></li>
                <li><a href="#">sub item 3</a></li>
                <li><a href="#">sub item 4</a></li>
                <li><a href="#">sub item 5</a></li>
            </ul>
        </li>
    </ul>

</div>
0 голосов
/ 20 января 2011

вот что можно скопировать и вставить:

<html>
<head>
<style>
    li.level1 { float: left; display: inline; margin-right: 20px }
    ul.level2 { display: inline }
    li.level2 { display: block; padding-left: 20px }
    ul.level3 { display: inline }
    li.level3 { display: block; padding-left: 20px }
</style>
</head>
<body>
<ul class="level1">
    <li class="level1">apple</li>
    <li class="level1">banana
        <ul class="level2">
            <li class="level2">banana 1
                <ul class="level3">
                    <li class="level3">banana 1 A</li>
                    <li class="level3">banana 1 B</li>
                </ul>
            </li>
            <li class="level2">banana 2</li>
        </ul>
    </li>
    <li class="level1">cherry
        <ul class="level2">
            <li class="level2">cherry 1</li>
            <li class="level2">cherry 2</li>
        </ul>
    </li>
    <li class="level1">dddd</li>
</ul>
</body>
</html>
0 голосов
/ 20 января 2011

Или, если вы хотите что-то чистое CSS, как насчет этого: http://jsfiddle.net/pLFqd/2/

Редактировать: Пропущен момент, когда вам не нужна функциональность наведения, попробуйте простой прикрепленный пример

...