реализация меню на Javascript с несколькими уровнями

@vempel · Регистрация: 28.04.2012

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

Хочу реализовать меню на javascript чтобы при нажатии по ссылке открывалось подменю, а при нажатии на одну из ссылок в подменю открывался еще блок меню. меню первого уровня я реализовал (нажимаю на меню открывается подменю), а когда я пытаюсь нажать на ссылки уже этого подменю все пропадает.
Вот мой код яваскрипт:

Javascript

function navigation() {
   var pop = document.getElementById('pop');
   var more = document.getElementById('more');
   var pop1 = document.getElementById('pop1');
   var mote = document.getElementById('mote');
   pop.onmouseover = show;
   more.onmouseover = show;
   
   pop.onmouseout = hide;
   more.onmouseout = hide;
   
   pop1.onmouseover = show1;
   mote.onmouseover = show1;
   
   pop1.onmouseout = hide1;
   mote.onmouseout = hide1;
 
 
}
function show() {
    var menu = document.getElementById('pop');
    var submenu = document.getElementById('more');
    submenu.style.display = 'block';
    submenu.style.width = '149px';
    }
function show1() {
    var sub = document.getElementById('pop1');
    var subm = document.getElementById('mote');
    subm.style.display = 'block';
    subm.style.width = '149px';
}
    
function hide() {
    var menu = document.getElementById('pop');
    var submenu = document.getElementById('more');
    submenu.style.display = 'none';
}
function hide1() {
var sub = document.getElementById('pop1');
var subm = document.getElementById('mote');
subm.style.display = 'none';

HTML5

<div id="nav">
<ul>
<li><a href="index.html">Домой</a></li>
<li><a id="pop" href="resourse.htm">Материалы</a></li>
<li><a href="gallery.htm">Галерея</a></li>
<li><a href="contacts.htm">Контакты</a></li>
</ul>
</div>
<div id="more">
<a href="articles.htm">Статьи</a>
<br />
<a id="pop1" href="rukovodstva.htm">Руководства</a>
</div>
<div id="mote">
<a href="node.htm">Статья 1</a><br />
<a href="bode.htm">Cтатья 2</a>
</div>

CSS

div#nav li  {
color:#ffffff;
display: inline-block;
width:150px;
background-color: #777;
}
div#nav li a  {
color: #fff;
text-decoration: none;
}
div#more {
position: relative;
left:195px;
top: -16px;
padding-top:15px;
padding-bottom: 5px;
text-align: left;
display: none;
color:white;
background-color: #555;
text-decoration: none;
}
div#more a:visited {color:white;}
div#more a:hover {background-color: #777;}
div#more a {
padding-left: 5px;
display:block;
text-decoration: none;
}
div#mote {
position: relative;
left: 344px;
top: -42px;
padding-top:15px;
padding-bottom: 5px;
text-align: left;
color:white;
background-color: #555;
text-decoration: none;
display: none;
}
div#mote a {
padding-left: 5px;
display:block;
text-decoration: none;
}
div#mote a:visited {color:white;}
div#mote a:hover {background-color: #777;}

Новые блоги и статьи
В чем отличие между INNER JOIN и OUTER JOIN bytestream 22.01.2025 В современных базах данных информация часто распределена между множеством взаимосвязанных таблиц, что делает операции объединения JOIN неотъемлемой частью работы с SQL. Эти операции позволяют. . .	Как сделать первую букву заглавной в JavaScript bytestream 22.01.2025 JavaScript предоставляет разработчикам множество инструментов для эффективной работы с текстовыми данными. Одной из часто встречающихся задач при обработке строк является преобразование первой буквы. . .	Что такое Big O нотация и алгоритмическая сложность bytestream 22.01.2025 Введение в алгоритмическую сложность В мире разработки программного обеспечения эффективность алгоритмов играет crucial роль в создании качественных приложений. Алгоритмическая сложность. . .	Как решать конфликты слияния (merge) в Git bytestream 22.01.2025 Конфликты слияния в системе контроля версий Git возникают в ситуациях, когда две или более ветки разработки содержат несовместимые изменения в одних и тех же участках кода. Эти конфликты представляют. . .	Как использовать регулярные выражения bytestream 22.01.2025 Регулярные выражения представляют собой мощный инструмент для работы с текстовыми данными, который позволяет осуществлять поиск, проверку и манипуляцию строками на основе определенных шаблонов. Этот. . .	Как выйти из Vim bytestream 22.01.2025 Vim (Vi IMproved) представляет собой один из самых влиятельных текстовых редакторов в истории компьютерной индустрии, эволюционировавший из своего предшественника Vi, созданного Биллом Джоем в 1976. . .
NoSQL базы данных: что это такое и какие существуют bytestream 22.01.2025 В современную эпоху цифровой трансформации объемы данных растут экспоненциально, создавая новые вызовы для традиционных систем управления базами данных. NoSQL (Not Only SQL) представляет собой. . .	Обновление исследования от команды MCM (январь 2025 г.) Programma_Boinc 22.01.2025 Обновление исследования от команды MCM (январь 2025 г. ) Мы продолжаем изучать молекулярные сигнатуры, связанные с раком легких, с текущим фокусом на GCM1, факторе транскрипции, участвующем в. . .	Как работать с Kafka в Go (Golang) bytestream 22.01.2025 Apache Kafka представляет собой распределенную платформу потоковой передачи данных, которая произвела революцию в области обработки событий и интеграции микросервисов. Эта система, изначально. . .	Как использовать RabbitMQ в Go (Golang) bytestream 22.01.2025 RabbitMQ представляет собой надежный и широко используемый брокер сообщений, который играет ключевую роль в построении современных распределенных систем и микросервисной архитектуры. В основе работы. . .	Как преобразовать список списков в простой список в Python bytestream 22.01.2025 При работе с Python разработчики часто сталкиваются с необходимостью обработки сложных структур данных, среди которых особое место занимают вложенные списки. Эти структуры представляют собой списки,. . .	Что такое GUID / UUID и как их создать bytestream 22.01.2025 В мире разработки программного обеспечения существует постоянная потребность в уникальной идентификации объектов, записей и ресурсов. Эта задача становится особенно актуальной в распределенных. . .

	12.08.2012, 12:50