Создание выпадающего списка или выпадающего меню на CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dropdowns 1: Basic, single level</title>
<style>
body {
font: 15px arial, helvetica, sans-serif;
background: #333;
color: #fff;
}
a {
color: #06c;
}
ul { /* all lists... */
padding: 0;
margin: 0;
background: #fff;
}
li { /* all list items... */
display: inline; /* расположите элементы списка слева направо */
position: relative; /* установите начало координат для дочерних блоков, которые будут располагаться от... */
}
ul ul { /* lists within lists... */
position: absolute; /* положите их поверх всего остального */
left: 0; /* выровняйте их слева от элемента родительского списка - необходимо для некоторых старых браузеров */
top: 100%; /* выровняйте их по нижней части родительского элемента списка - опять же, это необходимо только для старых браузеров */
display: none; /* hide 'em */
}
li:hover ul { /* при наведении курсора мыши на элементы списка проделайте это со списками, содержащимися в них... */
display: block; /* show 'em */
}
</style>
</head>
<body>
<ul>
<li>
<a href="">Birds</a>
<ul>
<li><a href="">Ratites</a></li>
<li><a href="">Fowl</a></li>
<li><a href="">Neoaves</a></li>
</ul>
</li>
<li>
<a href="">Mammals</a>
<ul>
<li><a href="">Monotremes</a></li>
<li><a href="">Marsupials</a></li>
<li><a href="">Placentals</a></li>
</ul>
</li>
<li>
<a href="">Reptiles</a>
<ul>
<li><a href="">Lizards and snakes</a></li>
<li><a href="">Tortoises and turtles</a></li>
<li><a href="">Crocodilians</a></li>
<li><a href="">Tuatara</a></li>
</ul>
</li>
<li>
<a href="">Amphibians</a>
<ul>
<li><a href="">Frogs and toads</a></li>
<li><a href="">Salamanders and newts</a></li>
<li><a href="">Caecilians</a></li>
</ul>
</li>
</ul>
<p>The basics of a CSS dropdown menu. View source for in-line comments or read the HTML Dog <a href="/techniques/dropdowns/">Dropdowns technique article</a> for more information.</p>
</body>
</html>Страницы в тему:
