Самая суть создания горизонтального и вертикального меню на CSS HTML

В инете навалом копипаста и перепоста без понимания сути работы подобного рода конструкций. По аналогии с обезьянами программистами на php. Что-то пишут, что-то работает, а понимания как работает — нет. 

Собственно минимальная конструкция на html

 

• 
  
  
  
  
  
  • link 1
  
  
  
  
  
  
  
  
  
  
  • link 2
  
  
  
  
  
  
  
  
  
  
  • link 3
  
  
  
  
  
  

 

итак структура представляет собой вложения, где для понимания присвоен уровень вложенности — 0,1,2,3

ul->li->ul->li
0     1    2     3

Представьте матрешку. Вот самая большая матрешка будет 0 уровнем, и далее в сторону уменьшения. При этом самая большая матрешка будет распространять свои характеристики на меньшие матрешки, которые находятся в ней.

То есть, если мы покрасим матрешку в другой цвет, то изменят в этот же цвет и все вложенные матрешки. Вот именно по этому принципу идет построение html структурной разметки и построения подобных конструкций.

CSS же в данном случае выступает инструментом — если хотите кисточкой , с помощью которой мы раскрашиваем матрешки.

Итак Матрешки мы изготовили в виде html структуры. Теперь покрасим ее используя CSS3.

тут мы присваиваем вложенному списку ul - 2 опцию сокрытия видимости ul — 2 и всех вложенных структур. В нашем случае это будут структуры li — 3

ul {
margin 0px;
padding: 0px;
}
ul li  ul {
display: none;
}
тут мы добавляем структуре li — 1 свойство обработчик события, который присвоит вложенной структуре ul -2свойство показать содержимое ul — 2 в течении момента когда обработчик активен . Событием выступает тут наведение мыши на структуру li-1

ul li:hover ul {
display: inline-block;
}
Как видите ничего сложного.