CSS форматирование нескольких навигационных групп

Question

Учитывая наценку подобный:

<h1 id="Menu1Title">Menu1</h1> 
<nav id="Menu1"> 
    <a>Item1-1</a> 
    <a>Item1-2</a> 
    <a>Item1-3</a> 
</nav> 

<h1 id="Menu2Title">Menu2</h1> 
<nav id="Menu2"> 
    <a>Item2-1</a> 
    <a>Item2-2</a> 
    <a>Item2-3</a> 
</nav> 

<h1 id="Menu3Title">Menu3</h1> 
<nav id="Menu3"> 
    <a>Item3-1</a> 
    <a>Item3-2</a> 
    <a>Item3-3</a> 
</nav> 

Как эта презентация будет достигнута только с помощью CSS?

Menu1 Menu2 Menu3 
Item1-1 
Item1-2 
Item1-3 
Item2-1 
Item2-2 
Item2-3 
Item3-1 
Item3-2 
Item3-3 

ULs также могут использоваться, если они представляют собой три отдельных элемента, а не под-списки друг друга. Я бы предпочел не использовать абсолютное позиционирование, так как есть другой контент ниже этого, который должен обтекать вышеупомянутую надпись. Мне также не нужны старые IE-хаки; поддерживая только IE9 и современные браузеры.

Возможно ли это? Благодаря!

Редактировать ... Вышеупомянутый вопрос о форматировании - стиль для мобильных устройств. Non-mobile отображается ниже, поэтому я надеялся на решение только для CSS, которое не требует изменений разметки.

Menu1 
Item1-1 
Item1-2 
Item1-3 

Menu2 
Item2-1 
Item2-2 
Item2-3 

Menu3 
Item3-1 
Item3-2 
Item3-3 

Answer 1

Для того чтобы начать свои списки должны быть в uls.

Если вы не можете использовать абсолютное позиционирование, вам необходимо изменить свою марку, чтобы достичь такого стиля. Заголовки должны появляться друг за другом в html. Если вы не можете изменить свою отметку в источнике, вам придется использовать jQuery для изменения порядка загрузки страницы.

в вашем jQuery Я бы нацелил все заголовки, а затем удалил все из них, кроме первого, а затем вставил эти удаленные заголовки после первого, а затем поместил очищающий div после последнего заголовка.

Смотрите это или код ниже: http://jsfiddle.net/wSLEb/

Ваша наценка стала бы выглядеть примерно так:

<h1 id="Menu1Title" class="header">Menu1</h1> 
<h1 id="Menu2Title" class="header">Menu2</h1> 
<h1 id="Menu3Title" class="header">Menu3</h1> 
<div class="clear"></div> <!--clearing div added to move first ul under the headers--> 
<nav id="Menu1"> 
<ul> 

<li><a>Item1-1</a></li> 
<li><a>Item1-2</a></li> 
<li><a>Item1-3</a></li> 
</ul> 
</nav> 
<nav id="Menu2"> 
<ul> 
<li><a>Item2-1</a></li> 
<li><a>Item2-2</a></li> 
<li><a>Item2-3</a></li> 
</ul> 
</nav> 
<nav id="Menu3"> 
<ul> 
<li><a>Item3-1</a></li> 
<li><a>Item3-2</a></li> 
<li><a>Item3-3</a></li> 
</ul> 
</nav> 

Стайлинг затем будет выглядеть примерно так:

.header { 
    float: left; 
    margin-right: 10px; 
} 
ul { 
    list-style: none; 
    margin:0; 
    padding:0; 
} 
.clear { 
    clear: both; 
} 

Answer 2

Хорошо, если вы на самом деле не могу изменить метку или использовать jQuery для изменения знака, а затем ниже - только CSS-решение:

http://jsfiddle.net/wSLEb/

Вы можете абсолютно поместить заголовки и дать первую верхнюю марку ul. Затем, используя селектор псевдоселементов :nth-of-type, вы можете настроить таргетинг на отдельные заголовки и дать им больше левого позиционирования, чтобы натолкнуть их на страницу и отстоять друг от друга.

Это не очень гибко, поскольку вам нужно жестко закодировать левое позиционирование, поэтому учтите, как ширина заголовков отображается на мобильном экране.

Разметьте будет:

<h1 id="Menu1Title" class="header">Menu1</h1> 
<nav id="Menu1"> 
<ul class="first"> 
<li><a>Item1-1</a></li> 
<li><a>Item1-2</a></li> 
<li><a>Item1-3</a></li> 
</ul> 
</nav> 
<h1 id="Menu2Title" class="header">Menu2</h1> 
<nav id="Menu2"> 
<ul> 
<li><a>Item2-1</a></li> 
<li><a>Item2-2</a></li> 
<li><a>Item2-3</a></li> 
</ul> 
</nav> 
<h1 id="Menu3Title" class="header">Menu3</h1> 
<nav id="Menu3"> 
<ul> 
<li><a>Item3-1</a></li> 
<li><a>Item3-2</a></li> 
<li><a>Item3-3</a></li> 
</ul> 
</nav> 

и CSS будет:

.header { 
    position: absolute; 
    top: 0; 
    left:0; 
} 
.header:nth-of-type(2) { 
    left:50px; 
} 
.header:nth-of-type(3) { 
    left:100px; 
} 
ul { 
    list-style: none; 
    margin:0; 
    padding:0; 
} 
ul.first { 
margin-top: 20px; 
} 

Вы можете прочитать больше о селекторов класса псевдо на сайте Криса Coyier здесь: http://css-tricks.com/pseudo-class-selectors/

Успехов