выпадающее меню - не выезжает

12
D
На сайте с 21.04.2010
Offline
38
1392

Есть страница http://www.yatagan.ru/ru/industry/

При наведении на список он выпадает поверх текста, что можно сделать чтобы он автоматом выезжал вниз двигая текст вниз

<ul id="mymenu">

<li style="text-align: center;">

<a href="/">Модули<br />

Воздухоподготовки</a><br />

<p style="text-align: left;">

<em>- Охлаждение газов </em></p>

<p style="text-align: left;">

<em>- Нагрев воздуха </em></p>

<p style="text-align: left;">

<em>- Осушение воздуха&nbsp; </em></p>

<p style="text-align: left;">

<em>- Смешение потоков </em></p>

<ul>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mo.html"><strong>МО </strong>– водяной&nbsp; охладитель</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mob.html"><strong>МОВ</strong> – воздушный охладитель</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mto.html"><strong>МТО</strong> – модуль&nbsp; теплообмена</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mck.html"><strong>МСК</strong> – смесительная камера</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mko.html"><strong>МКО </strong>– осушитель воздуха</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mgf.html"><strong>МГФ</strong> – гидрофильтр</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mkn.html"><strong>МКН – </strong>канальный нагреватель</a></li>

</ul>

</li>

<li style="text-align: center;">

<a href="/">Фильтры<br />

Защитные</a><br />

<p style="text-align: left;">

<em>Защита<br />

Газоконвертора от: </em></p>

<p style="text-align: left;">

<em>- Пыли </em></p>

<p style="text-align: left;">

<em>- Волокон</em></p>

<p style="text-align: left;">

<em>- Сажи и жиров</em></p>

<ul>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fpa.html"><strong>ФПА </strong>– аэрозольный фильтр</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fk.html"><strong>ФК</strong> – карманный фильтр</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fsm.html"><strong>ФСМ</strong> – сетчатый многослойный</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fgo.html"><strong>ФГО </strong>– фильтр грубой очистки</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fio.html"><strong>ФИО </strong>– ионообменный фильтр</a></li>

</ul>

</li>

<li style="text-align: center;">

<a href="/">Секции<br />

Электростатические</a><br />

<p style="text-align: left;">

<em>Очистка воздуха от: </em></p>

<p style="text-align: left;">

<em>- Дымов </em></p>

<p style="text-align: left;">

<em>- Смол </em></p>

<p style="text-align: left;">

<em>- Аэрозолей </em></p>

<ul>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/electrosekcii/du.html"><strong>ДУ </strong>– электростатический</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/electrosekcii/dua.html"><strong>ДУА</strong> – с&nbsp; промывкой</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/electrosekcii/duk.html"><strong>ДУК</strong> – картриджный</a></li>

</ul>

</li>

<li style="text-align: center;">

<a href="/">Секции<br />

Плазменные</a><br />

<p style="text-align: left;">

<em>Очистка воздуха от: </em></p>

<p style="text-align: left;">

<em>- Газов </em></p>

<p style="text-align: left;">

<em>- Паров </em></p>

<p style="text-align: left;">

<em>- Запахов </em></p>

<ul>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/plazmasekci/plazma1000.html"><strong>1000</strong>,&nbsp; плазменный, 10 кВ</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/plazmasekci/plazma1000x.html"><strong>1000Х</strong>, плазменный 15 кВ</a></li>

</ul>

</li>

<li style="text-align: center;">

<a href="/">Секции Финишной<br />

Очистки Воздуха</a><br />

<p style="text-align: left;">

<em>Доочистка воздуха от: </em></p>

<p style="text-align: left;">

<em>- Пыли </em></p>

<p style="text-align: left;">

<em>- Газов</em></p>

<p style="text-align: left;">

<em>-&nbsp; Запахов</em></p>

<ul>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/ce.html"><strong>СЕ </strong>&nbsp;– сорбционный фильтр</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/cec.html"><strong>СЕС</strong> – сорбционный&nbsp; усиленный</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/ckt.html"><strong>СКТ</strong> – каталитический, тканевый</a></li>

<li style="text-align: left;">

<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/ckn.html"><strong>СКН </strong>– каталитический, насып-й</a></li>

<li style="text-align: left;">

<a href="/"><strong>СРМ</strong> – регулятор мощности</a></li>

</ul>

</li>

</ul>

#mymenu {

float: left;

width: 720px;

margin: 5px 5px;

list-style: none;

}

#mymenu li {

float: left;

width: auto;

padding: 0 5px;

font-size: 18px;

list-style: none;

}

#mymenu li ul {

display: none;

width: 200px;

list-style: none;

}

#mymenu li:hover ul {

display: block;

position: absolute;

list-style: none;

margin: 0;

padding: 0;

height:200px;

}

#mymenu li ul li {

float: left;

width: 200px;

padding: 5px 0;

font-size: 14px;

}

C
На сайте с 21.06.2012
Offline
56
#1

Не особо разбираюсь в css, но у вас там стоит значение position: со свойством absolute; Наверное поэтому он и идет поверх текста, а не сдвигает его.

D
На сайте с 21.04.2010
Offline
38
#2

пробовал с этим мутить что то не получилось, в таких узких вещах не спец(

C
На сайте с 21.06.2012
Offline
56
#3

хм, сейчас попробовал у себя ваше меню, убрал из css position: absolute; текст стал отодвигаться

D
На сайте с 21.04.2010
Offline
38
#4

но его колбасит влево вправо, надо чтобы на месте стоял

N
На сайте с 06.04.2011
Offline
53
#5

position: absolute;

то задали для li ul li

а position: relative; в css не вижу... родительский элемент явно должен присутствовать

и вообще если это аккордеон вертикальный, зачем задавать position: absolute; ? внутрений список будет налаживаться на текст...

вы display: block; попробуйте задать выпадающему списку без position: absolute;

Грамотная верстка. Изготовление сайтов на базе CMS Joomla. (/ru/forum/897104)
Kronus
На сайте с 06.09.2010
Offline
104
#6
dchirkov:
но его колбасит влево вправо, надо чтобы на месте стоял

Кого колбасит то ? Текст или меню ?

Иммерсионная (аква) печать (http://inter-decor.kz/)
D
На сайте с 21.04.2010
Offline
38
#7
Kronus:
Кого колбасит то ? Текст или меню ?

меню, когда убираешь абсолют

---------- Добавлено 11.07.2012 в 17:32 ----------

убрал, щас как то меню сьехало

---------- Добавлено 11.07.2012 в 17:33 ----------

последний столбик вниз ушел

C
На сайте с 21.06.2012
Offline
56
#8

У меня перестало убегать, после того, как я увеличил ширину width: 720px; до 1000px, или можно поставить 100%. Но это на странице, где только одно меню, не знаю, как у вас на сайте будет, попробуйте.

Kronus
На сайте с 06.09.2010
Offline
104
#9
dchirkov:
меню, когда убираешь абсолют

---------- Добавлено 11.07.2012 в 17:32 ----------

убрал, щас как то меню сьехало

---------- Добавлено 11.07.2012 в 17:33 ----------

последний столбик вниз ушел

Так правильно колбасит у вас в #mymenu li ширина на auto стоит, поиграйтесь с ней. Общая ширина меню 720/5 столбцов 144 px. Попробуйте выставить вместо auto 144 px

corman:
У меня перестало убегать, после того, как я увеличил ширину width: 720px; до 1000px, или можно поставить 100%. Но это на странице, где только одно меню, не знаю, как у вас на сайте будет, попробуйте.

P.S У меня по прежднему колбасит, играйтесь с шириной столбцов

D
На сайте с 21.04.2010
Offline
38
#10

щас увеличил все равно че то верхний и нижний список колбасит

---------- Добавлено 11.07.2012 в 17:56 ----------

завтра с утра будем долбить, всем огромное спасибо

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий