Есть сайт unitepower.ru
На нем 3-ий модуль слева сверху - это меню-аккордеон (сделан как произвольный html-код)
Однако он занимает только немного места, и все меню вылезает поверх остальных модулей.
Как здесь задать height:auto?
Код блока прилагается:
______________________________________________
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
#basic-accordian{
border:2px solid #EEE;
padding:5px;
width:170px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-92px;
z-index:2;
margin-top:5px;
}
.accordion_headings{
padding:5px;
background:#RRGGBB;
color:#27242E;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}
.accordion_headings:hover{
background:#RRGGBB;
}
.accordion_child{
padding:15px;
background:#EEE;
}
.header_highlight{
background:#RRGGBB;
}
</style>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="basic-accordian" ><!--Parent of the Accordion-->
<!--Start of each accordion item-->
<div id="test-header" class="accordion_headings header_highlight" >Книги</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">
<ul class="accordionstyle"><li class="item66"><a href="/books/biznes.html"><span>Бизнес</span></a></li><li class="item67"><a href="/books/health.html"><span>Здоровье</span></a></li><li class="item68"><a href="/books/otnoshenia.html"><span>Отношения</span></a></li><li class="item69"><a href="/books/food.html"><span>Питание</span></a></li><li class="item70"><a href="/books/psihologia.html"><span>Психология</span></a></li><li class="item71"><a href="/books/religiya.html"><span>Религия</span></a></li><li class="item72"><a href="/books/samorazvitie.html"><span>Саморазвитие</span></a></li><li class="item73"><a href="/books/sex.html"><span>Секс</span></a></li><li class="item74"><a href="/books/sport.html"><span>Спорт</span></a></li><li class="item75"><a href="/books/ezoterica.html"><span>Эзотерика</span></a></li></ul>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test1-header" class="accordion_headings" >Программы</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test1-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">
<ul class="accordionstyle"><li class="item76"><a href="/software/grafic.html"><span>Графика</span></a></li><li class="item80"><a href="/software/text.html"><span>Текст</span></a></li><li class="item77"><a href="/software/internet.html"><span>Интернет</span></a></li><li class="item78"><a href="/software/milti.html"><span>Мультимедиа</span></a></li><li class="item79"><a href="/software/system.html"><span>Система</span></a></li></ul>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test2-header" class="accordion_headings" >Видео</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test2-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">
<ul class="accordionstyle"><li class="item85"><a href="/video/vdohnovenie.html"><span>Вдохновение</span></a></li><li class="item87"><a href="/video/klips.html"><span>Клипы</span></a></li></ul>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test3-header" class="accordion_headings">Музыка</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test3-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">
<ul class="accordionstyle"><li class="item81"><a href="/misic/nestandart.html"><span>Нестандартная</span></a></li><li class="item82"><a href="/misic/relax.html"><span>Релаксирующая</span></a></li><li class="item83"><a href="/misic/rock.html"><span>Рок</span></a></li><li class="item84"><a href="/misic/fresh.html"><span>Свежая музыка</span></a></li></ul></li></ul>
</div>
</div>
<!--End of each accordion item-->
</div><!--End of accordion parent-->
</body>
</html>
_______________________________________
Помогите кто чем может))
24.06.2021, 20:23:06