Мульти-вложенное меню Javascript / css
Я пытаюсь создать вложенное меню с помощью CSS и изо всех сил пытаюсь заставить это работать, у меня есть попытка здесь, но я не могу продвинуться дальше. Есть ли что-то, что я делаю не так, и если да, может ли кто-нибудь объяснить, как работает CSS в этих случаях ... Это динамически создаваемое меню ...
Я не могу заставить подменю работать соответствующим образом, и сколько бы я ни искал в гугле, я не могу заставить свое работать, как другие! :)
Любая помощь приветствуется!
#category_list {
display: flex;
justify-content: space-evenly;
list-style-type: none;
padding: 8px;
background-color: azure;
}
.dropdown .submenu {
display: none;
list-style-type: none;
}
.dropdown:hover .submenu {
display: block;
list-style-type: none;
background-color: antiquewhite;
}
#category_list .dropdown .submenu:hover {
display: block;
}
#category_list .dropdown .submenu .dropdown .submenu {
display: none;
padding: 20px;
}<ul class=category_list>
<li class = "dropdown">
Computer Equipment
<ul class = "submenu">
<li class = "dropdown">
Computer Parts
<ul class = "submenu">
<li>
<a href = "categoryPage.html?categoryId=3">MotherBoard</a>
</li>
<li>
<a href = "categoryPage.html?categoryId=3">Power Supply</a>
</li>
<li>
<a href = "categoryPage.html?categoryId=3">Graphic Card</a>
</li>
<li>
<a href = "categoryPage.html?categoryId=3">Processor</a>
</li>
<li>
<a href = "categoryPage.html?categoryId=3">Memmory</a>
</li>
<li>
<a href = "categoryPage.html?categoryId=3">Computer Case</a>
</li>
</ul>
</li>
<li>
Storage
<ul>
<li>
<a>SSD</a>
</li>
<li>
<a>Hard drive</a>
</li>
</ul>
</li>
<li>
Network
<ul>
<li>
<a>Router</a>
<a>Switch</a>
<a>Network Cable</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Ответы 1
Наличие нескольких вложенных элементов, использующих одно и то же имя класса, вызывает сложности из-за каскадного характера CSS. Ваша специфика должна немного больше контролироваться с помощью непосредственного дочернего селектора ">", поэтому для каждого уровня пары раскрывающийся список / подменю, когда следует выполнять стили наведения.
Они будут нацелены на все дочерние подменю на всех «уровнях»:
.dropdown .submenu {}
.dropdown:hover .submenu {}
Вместо этого вы хотите управлять непосредственным дочерним подменю .dropdown:
.dropdown:hover > .submenu {displacy: block; ...otherVisibilityStyles}
Я предлагаю вам использовать javascript вместо того, чтобы делать это с помощью css ...