Вопрос пользователя:
Ответ нейросети:
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
nav {
display: flex;
justify-content: center;
background-color: #444;
padding: 5px 0;
}
ul {
list-style: none;
display: flex;
}
li {
margin: 0 10px;
position: relative;
}
a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.submenu {
display: none;
position: absolute;
background-color: #555;
padding: 5px 0;
width: 100%;
}
.submenu a {
padding: 5px 20px;
}
.submenu a:hover {
background-color: #666;
}
</style>
</head>
<body>
<header>
<h1>Dropdown Menu</h1>
</header>
<nav>
<ul>
<li>
<a href="#">Menu 1</a>
<div class="submenu">
<a href="#">Submenu 1</a>
<a href="#">Submenu 2</a>
<a href="#">Submenu 3</a>
<a href="#">Submenu 4</a>
</div>
</li>
<li>
<a href="#">Menu 2</a>
<div class="submenu">
<a href="#">Submenu 1</a>
<a href="#">Submenu 2</a>
<a href="#">Submenu 3</a>
<a href="#">Submenu 4</a>
</div>
</li>
<li>
<a href="#">Menu 3</a>
<div class="submenu">
<a href="#">Submenu 1</a>
<a href="#">Submenu 2</a>
<a href="#">Submenu 3</a>
<a href="#">Submenu 4</a>
</div>
</li>
<li>
<a href="#">Menu 4</a>
<div class="submenu">
<a href="#">Submenu 1</a>
<a href="#">Submenu 2</a>
<a href="#">Submenu 3</a>
<a href="#">Submenu 4</a>
</div>
</li>
</ul>
</nav>
<script>
const menuItems = document.querySelectorAll('.submenu');
menuItems.forEach(item => {
item.previousElementSibling.addEventListener('click', () => {
item.style.display = item.style.display === 'block' ? 'none' : 'block';
});
});
</script>
</body>
</html>Обратите внимание: ответы, предоставляемые искусственным интеллектом, могут не всегда быть точными. Не рассчитывайте на них в критически важных областях, таких как медицина, юриспруденция, финансы или в вопросах, связанных с безопасностью. Для важных решений всегда обращайтесь к квалифицированным специалистам. Администрация сайта не несет ответственности за контент, сгенерированный автоматически.