Выподающее меню

@Ilya90s · Регистрация: 01.11.2012

Студворк — интернет-сервис помощи студентам

Как сделать так, чтобы меню возвращалась в нормальное положение обратно, когда убирается кнопка с элемента?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4');
startList = function allclose() {
    for (i=0; i < id_menu.length; i++){
        document.getElementById(id_menu[i]).style.display = "none";
    }
}
function openMenu(id){
    for (i=0; i < id_menu.length; i++){
        if (id != id_menu[i]){
            document.getElementById(id_menu[i]).style.display = "none";
        }
    }
    if (document.getElementById(id).style.display == "block"){
        document.getElementById(id).style.display = "none";
    }else{
        document.getElementById(id).style.display = "block";
    }
}
window.onload=startList;
</script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="menu_body">
    <ul>
        <li><a href="#" onmouseover="openMenu('sub_menu_1');return(false)">Окна и лоджии</a>
            <ul id="sub_menu_1">
                <li><a href="#">ПВХ</a></li>
                <li><a href="#">Флюминиевые коснструкции</a></li>
            </ul>
        </li>
        <li><a href="#">Рольставни</a></li>
        <li><a href="#" onmouseover="openMenu('sub_menu_2');return(false)">Системы автоматики</a>
            <ul id="sub_menu_2">
                <li><a href="#">шлагбаумы</a></li>
                <li><a href="#">система умный дом</a></li>
                <li><a href="#">автоматика для ворот</a></li>
            </ul>
        </li>
        <li><a href="#" onmouseover="openMenu('sub_menu_3');return(false)">Заборы</a>
            <ul id="sub_menu_3">
                <li><a href="#">из профлиста</a></li>
                <li><a href="#">с элементами ковки</a></li>
                <li><a href="#">комбинированные</a></li>
            </ul>
        </li>
        <li><a href="#">Автоматические двери</a></li>
        <li><a href="#" onmouseover="openMenu('sub_menu_4');return(false)">Отделочные работы по дереву</a>
            <ul id="sub_menu_4">
                <li><a href="#">-</a></li>
                <li><a href="#">-</a></li>
                <li><a href="#">-</a></li>
            </ul>
        </li>
        <li><a href="#">Услуги крана манипулятора</a></li>
    </ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#menu_body li ul {
    display: none;
    }
#menu_body li:hover ul, #menu_body li.over ul {
    display: block;
    }
 #menu_body {
    width: 250px;
    }
#menu_body a {
    display: block;
    width: 185px;
    height: 24px;
    } 
 
#menu_body ul li {
    list-style-type: none;
    border-bottom: 1px solid #fff;
    padding-left: 0px;
    } 
 
#menu_body ul li a {
    color: #000;
    text-decoration: none;
    font:1.3em Geneva, Tahoma, "Nimbus Sans L", sans-serif;
    } 
 
#menu_body ul li a:hover {
    color: #fff;
    text-decoration: none;
    background:rgba(0,0,0,.3);
    -webkit-transition:all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    } 
 
#menu_body ul li ul li {
    border: 0;
    list-style-type: none;
    color: #fff;
    list-style-position: inside;
    } 
 
#menu_body ul li ul{
    border-top: 1px solid #fff;
    margin-left: -10px;
    padding-left: 50px;
    }

@BigProgrammer · 13.12.2013, 20:30

Можно поставить обработчик события mouseleave на <li> внешнего списка.

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@BigProgrammer 38 / 38 / 8 Регистрация: 20.07.2013 Сообщений: 105
	13.12.2013, 20:30
	Можно поставить обработчик события mouseleave на <li> внешнего списка. 1