Pure CSS многоуровневое раскрывающееся меню

Раньше я не делал много работы с многоуровневыми, чистыми CSS-меню, но теперь я ищу самый чистый возможный метод, который есть там. Когда я искал этот онлайн-сайт, я нашел множество решений, которым было 4-5 лет, и я не уверен, есть ли лучшие способы достижения этого, чем делать что-то подобное .

.third-level-menu { position: absolute; top: 0; right: -150px; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .third-level-menu > li { height: 30px; background: #999999; } .third-level-menu > li:hover { background: #CCCCCC; } .second-level-menu { position: absolute; top: 30px; left: 0; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .second-level-menu > li { position: relative; height: 30px; background: #999999; } .second-level-menu > li:hover { background: #CCCCCC; } .top-level-menu { list-style: none; padding: 0; margin: 0; } .top-level-menu > li { position: relative; float: left; height: 30px; width: 150px; background: #999999; } .top-level-menu > li:hover { background: #CCCCCC; } .top-level-menu li:hover > ul { /* On hover, display the next level's menu */ display: inline; } /* Menu Link Styles */ .top-level-menu a /* Apply to all links inside the multi-level menu */ { font: bold 14px Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; padding: 0 0 0 10px; /* Make the link cover the entire list item-container */ display: block; line-height: 30px; } .top-level-menu a:hover { color: #000000; } 
  
  

CSS 3 Кодирование – копирование и вставка

  направо  

Вот пара хороших сайтов, чтобы проверить это,

http://www.tripwiremagazine.com/2011/10/css-menu-and-navigation.html (Множество примеров)

http://webdesignerwall.com/tutorials/css3-dropdown-menu (1 пример больше учебника)

Надеюсь, это полезная информация!

Для меню, которое реагирует на события кликов, а не просто наведения, и действует аналогично элементу управления select …

Чистое меню выбора CSS

HTML

 

CSS

 ul, li { list-style:none; margin:0; padding:0; } li input { display:none; } ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label { display:none; } input:checked+label { color:red; }