Горизонтальное дерево css - HTML и CSS

Manonia · 29.04.2015, 10:49

Привет!

Подскажите пожалуйста, как сверстать след. дерево: каждый последующий узел должен раскрываться на одном уровне с родителем. У меня это получилось(используя абсолютное позиционирование). Но теперь если, например, раскрыть первый узел Level1, то второй
узел Level 2 не смещается автоматически вниз и если открыть его, то происходить наложение узлов. Как сделать, чтобы Level2 при открытии Level1 автоматически смещался на нужное расстояние?

Код HTML:

<html>
<head>
    <script src="jquery.js"></script>
    <script type="text/JavaScript">
    $(document).ready(function() 
	{
		$("li").click(function(e) {
		    e.stopPropagation();
			$(this).children('ul').toggle();
	   });
   });
</script>
	


<style>
    .csstree > ul
    {
	   width: 200px;
    }
	   
    .csstree ul
    {
          cursor: pointer;
	    color: blue;
	    list-style: none;
	    width: 110px;
	    position: relative;
	    z-index: 597;
    }
	 
    .csstree  ul ul
    {
	   position: absolute; 
	   top: 1px; 
	   left: 99%; 
	   width: 100%; 
	   padding: 0px;
	   z-index: 598;
     }
	   
     .csstree  ul li
     {
          position: relative
      }
	   
    .csstree  ul ul ul
    {
         width: 200px;
         position: absolute; 
	 top: 1px; 
	 left: 99%; 
	 width: 100%; 
         padding: 0px;
         z-index: 598;
    }


</style>
<head>
<body>
<div class="csstree">
	<ul class="tree">
		<li>
			Level1
			<ul style="display: none; ">
				<li>
					 <input type="checkbox" /> level1.2
				</li>
				<li>
					<input type="checkbox" /> level1.3
					<ul style="display: none">
						<li class="current"> <input type="checkbox" /> level1.3.1</li>
						<li><input type="checkbox" /> level1.3.1</li>
						<li><input type="checkbox" /> level1.3.1</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			Level2
			<ul style="display: none">
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Выпадающее горизонтальное меню только на CSS	RelaX Inc.	HTML и CSS	26	10.07.2012 12:44
Выпадающее горизонтальное меню на css	st_sasha	HTML и CSS	1	20.10.2011 16:26
горизонтальное меню	s.talke.r	Паскаль, Turbo Pascal, PascalABC.NET	1	18.12.2010 17:12
Горизонтальное меню на CSS.	yermolenko	HTML и CSS	2	27.05.2010 10:47