Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Удаленная работа для IT-специалистов
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Горизонтальное многоуровневое меню</title> <link rel="stylesheet" href="style.css" /> </head> <body> <ul id="menu-header" class="menu"> <li id="menu-item" class="menu-item"><a>Пункт 1</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a href="#" aria-current="page">Пункт 1.2</a></li> </ul> </li> <li id="menu-item" class="menu-item"><a>Пункт 2</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a>Пункт 2.1</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a>Пункт 2.1.1</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.1.2</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.1.3</a></li> </ul> </li> <li id="menu-item" class="menu-item"><a href="#">Пункт 2.2</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a>Пункт 2.2.1</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.2.2</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.2.3</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
#menu-header { margin: 0; padding: 0; list-style: none; color: #5f727f; background: #fff; border: 1px solid #dfe5e8; width: 300px; } #menu-header a { display: block; width: 100%; padding: 10px; color: #5f727f; transition: 0.1s all; } #menu-header a:hover { color: #fff; background: #729fca; padding: 10px 0 10px 20px; border-left: 3px solid #4179ae; } .sub-menu > .sub-menu { color: red; } .sub-menu { margin: 0; padding: 0; list-style: none; color: #5f727f; background: #f4f6f7; border: 1px solid #dfe5e8; position: absolute; width: 300px; left: 300px; z-index: 1000; opacity: 0; top: -9999em; } .menu-item { position: relative; } .menu-item:hover .sub-menu { opacity: 1; top: 0; }
.menu-item:hover > .sub-menu { opacity: 1; top: 0; }
