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

dtagan · July 31, 2012

Меню

<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

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

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

flintovich · July 31, 2012

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

#content ul li {

Удалить margin

}

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

#menu li {

padding: 4px 0;

}

dtagan · July 31, 2012

Растяните размер li вниз. У вас есть маленький промежуток, где ховер перестает работать.
#content ul li {
Удалить margin
}
А тут добавить падинг
#menu li {
padding: 4px 0;
}

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

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

dtagan · August 3, 2012

Растяните размер li вниз. У вас есть маленький промежуток, где ховер перестает работать.
#content ul li {
Удалить margin
}
А тут добавить падинг
#menu li {
padding: 4px 0;
}

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

Edited August 3, 2012 by dtagan

Sign In

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

Question

dtagan

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

flintovich

Link to comment

Share on other sites

dtagan

Link to comment

Share on other sites

dtagan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information