Горизонтальне меню, що випадає на css

Відео: CSS меню - для новачка, вчимо швидко і просто

Я вже колись писав про те, як зробити вертикальне меню, що випадає на CSS. У цій же статті я розповім про те, як зробити горизонтальне меню, що випадає на CSS.

наводжу HTML-код:

Відео: Як у HTML, CSS створити випадає горизонтальне меню

class="Menu"gt; 
 
href="#"gt;Головна 
 
 
href="#"gt;Меню 1 
 
 
href="#"gt;підменю 1 
 
 
href="#"gt;меню 2 
 
 
href="#"gt;підменю 3 
 
 
 
 
href="#"gt;Меню 2 
 
 
href="#"gt;Подменю4 
 
 
href="#"gt;підменю 5 
 
 
href="#"gt;підменю 6 
 
 
href="#"gt;Подменю7 
 
 
href="#"gt;підменю 8

І 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:8px20px10px- 
 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:6px08px- 
}

Безумовно, тут дано мало не мінімум властивостей. Щоб це все прикрасити, потрібно міняти стилі. Що стосується HTML-коду, то він ідентичний і для горизонтального, і для вертикального меню.