Я уже когда-то писал о том, как сделать вертикальное выпадающее меню на CSS . В этой же статье я расскажу о том, как сделать горизонтальное выпадающее меню на CSS .
Я уже когда-то писал о том, как сделать вертикальное выпадающее меню на CSS. В этой же статье я расскажу о том, как сделать горизонтальное выпадающее меню на CSS.
Привожу HTML-код:
<ul class="menu">
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Меню 1</a>
<ul>
<li>
<a href="#">Подменю 1</a>
</li>
<li>
<a href="#">Подменю 2</a>
</li>
<li>
<a href="#">Подменю 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Меню 2</a>
<ul>
<li>
<a href="#">Подменю4</a>
</li>
<li>
<a href="#">Подменю 5</a>
</li>
<li>
<a href="#">Подменю 6</a>
</li>
<li>
<a href="#">Подменю7</a>
</li>
<li>
<a href="#">Подменю 8</a>
</li>
</ul>
</li>
</ul>
И CSS-код:
ul.menu {
display: inline-block;
margin: 0;
padding: 0;
}
ul.menu li {
float: left;
list-style: none;
}
ul.menu li a {
display: block;
padding: 8px 20px 10px;
text-decoration: none;
}
ul.menu li ul {
display: none;
padding-left: 10px;
}
ul.menu li:hover ul {
display: block;
position: absolute;
}
ul.menu li:hover ul li {
float: none;
}
ul.menu li:hover ul li a {
padding: 6px 0 8px;
}
Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.
Теперь у Вас не должно быть проблем с созданием горизонтального выпадающего меню на CSS.
