Jump to content
  • 0

Проблема с работой "открывающегося" меню


dtagan
 Share

Question

Меню

<ul id="menu">
<li>
<p align="center">
<a class="ssilka" style="margin-left:-40px;" href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/">Модули<br />
Воздухоподготовки</a></p>


<ul style="margin-left:-40px;">
<p style="font-size:12px; color:#fff; margin-left:10px;">
- Охлаждение газов<br />
- Нагрев воздуха<br />
- Осушение воздуха<br />
- Смешение потоков
</p>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mob.html"><strong>МОВ</strong> – воздушный охладитель</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mto.html"><strong>МТО</strong> – модуль </a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mck.html"><strong>МСК</strong> – смесительная камера</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mko.html"><strong>МКО </strong>– осушитель воздуха</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mgf.html"><strong>МГФ</strong> – гидрофильтр</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/vozduhpodgotovka/mkn.html"><strong>МКН – </strong>канальный нагреватель</a></li>
</ul>
</li>
<li>
<p align="center">
<a style="margin-left:30px; margin-right:30px;" href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/">Фильтры<br />
Защитные</a></p>

<ul>
<p style="font-size:12px; color:#fff; margin-left:10px;">
Защита<br />
Газоконвертора от:<br />
- Пыли<br />
- Волокон<br />
- Сажи и жиров
</p>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fpa.html"><strong>ФПА </strong>– аэрозольный фильтр</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fk.html"><strong>ФК</strong> – карманный фильтр</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fsm.html"><strong>ФСМ</strong> – сетчатый многослойный</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fgo.html"><strong>ФГО </strong>– фильтр грубой очистки</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/filtrzashitn/fio.html"><strong>ФИО </strong>– ионообменный фильтр</a></li>
</ul>
</li>
<li>
<p align="center">
<a style="margin-left:-5px; margin-right:-5px;" href="http://www.yatagan.ru/ru/industry/moduli/electrosekcii">Секции<br />
Электростатические</a></p>

<ul>
<p style="font-size:12px; color:#fff; margin-left:10px;">
Очистка воздуха от:<br />
- Дымов<br />
- Смол<br />
- Аэрозолей
</p>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/electrosekcii/du.html"><strong>ДУ </strong>– электростатический</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/electrosekcii/dua.html"><strong>ДУА</strong> – с  промывкой</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/electrosekcii/duk.html"><strong>ДУК</strong> – картриджный</a></li>
</ul>
</li>
<li>
<p align="center">
<a style="margin-left:20px; margin-right:20px;" href="http://www.yatagan.ru/ru/industry/moduli/plazmasekci/">Секции<br />
Плазменные</a></p>

<ul>
<p style="font-size:12px; color:#fff; margin-left:10px;">
Очистка воздуха от:<br />
- Газов<br />
- Паров<br />
- Запахов
</p>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/plazmasekci/plazma1000.html"><strong>1000</strong>,  плазменный, 10 кВ</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/plazmasekci/plazma1000x.html"><strong>1000Х</strong>, плазменный, 15 кВ</a></li>
</ul>
</li>
<li>
<p align="center">
<a style="margin-left:20px;" href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/">Секции<br />
Финишные</a></p>

<ul>
<p style="font-size:12px; color:#fff; margin-left:10px;">
Доочистка воздуха от:<br />
- Пыли<br />
- Газов<br />
- Запахов
</p>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/ce.html"><strong>СЕ </strong> – сорбционный фильтр</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/cec.html"><strong>СЕС</strong> – сорбционный  усиленный</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/ckt.html"><strong>СКТ</strong> – каталитический, тканевый</a></li>
<li>
<a href="http://www.yatagan.ru/ru/industry/moduli/sekcifinish/ckn.html"><strong>СКН </strong>– каталитический, насып-й</a></li>
<li>
<a href="/"><strong>СРМ</strong> – регулятор мощности</a></li>
</ul>
</li>
</ul>

css

/* Главное меню */
#menu
{
width: 98%;
margin: 0;
padding: 5px 0 0 0;
list-style: none;

background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
float: left;
padding: 0 0 2px 0;
position:relative;
list-style: none;
border-right: 2px solid #9ecde0;
}

#menu li:last-child {border: none;}

#menu a
{
float: left;
height: 50px;
padding: 0 8px;
color: #fff;
font-size:12px;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
font-family: Verdana;
text-decoration:none;

}

#menu li:hover > a
{
color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}

#menu li:hover > ul
{
display: block;
}

/* Подменю */

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 60px;
left: 0;
z-index: 99999;
background: #9ecde0;
-moz-border-radius: 5px;
border-radius: 5px;
width: 250px;
}

#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menu ul a
{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a /* IE6 */
{
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
width: 150px;
}

#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: 10px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
border-top-color: #fff;

}

#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;


}

#menu ul li:last-child a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

Проблема:

При наведении на меню, после перехода на подменю (стрелку вниз), пропадает подменю... Мои небольшие знание не могут мне помочь...

Скрин при наведении мыши на меню "модули воздухоподготовки" - http://s59.radikal.ru/i164/1207/66/ddba1563ced7.jpg , и скрин при опускание ниже фона меню "модули воздухоподготовки" - http://s019.radikal.ru/i628/1207/64/418411ebe5ed.jpg

Ссылка на страницу с меню

Помогите, пожалуйста!

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Растяните размер li вниз. У вас есть маленький промежуток, где ховер перестает работать.

#content ul li {

Удалить margin

}

А тут добавить падинг

#menu li {

padding: 4px 0;

}

Похоже работает.

Огромное спасибо!

Link to comment
Share on other sites

  • 0

Растяните размер li вниз. У вас есть маленький промежуток, где ховер перестает работать.

#content ul li {

Удалить margin

}

А тут добавить падинг

#menu li {

padding: 4px 0;

}

Правда в ИЕ чуть съехало... но всё равно спасибо!

Edited by dtagan
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy