Меню состоит из нескольких пунктов. Самый первый и самый большой ведёт на страницу рубрики. Остальные — на страницы подрубрик. Под меню можно разместить список с последними статьями из рубрики.
На Главной странице может быть несколько таких меню.
Когда подрубрики не помещаются в одну строку, то они поочерёдно переходят на следующую
<style> .raz { margin: 1em 0; word-spacing: 1em; } .raz a { text-decoration: none; } .raz a:first-child { font-size: 200%; } </style> <div class="raz"> <a href="#">Красота</a> <a href="#">Волосы</a> <a href="#">Лицо</a> <a href="#">Макияж</a> <a href="#">Тело</a> <a href="#">Косметология</a> <a href="#">Диеты</a> <a href="#">Фитнес</a> </div>
Когда подрубрики не помещаются в одну строку, то они все переходят на следующую
<style> .raz a { text-decoration: none; vertical-align: middle; } .raz > a { display: inline-block; padding: .5em 0; font-size: 2em; } .raz span { display: inline-block; padding: 0 1em 1em; word-spacing: 1em; } </style> <div class="raz"> <a href="#">Красота</a> <span> <a href="#">Волосы</a> <a href="#">Лицо</a> <a href="#">Макияж</a> <a href="#">Тело</a> <a href="#">Косметология</a> <a href="#">Диеты</a> <a href="#">Фитнес</a> </span> </div>
<style> .raz { padding: 0 .4em; line-height: 1em; box-sizing: border-box; background-image: linear-gradient(transparent 1.5em, currentColor 1.5em, currentColor calc(1.5em + 1px), transparent calc(1.5em + 1px)); } .raz a { text-decoration: none; vertical-align: middle; background: #fff; } .raz > a { display: inline-block; margin: .5em .2em; /* .4em / 2 = .2em, поскольку font-size: 2em; */ padding: 0 .15em; /* .3em / 2 = .15em, поскольку font-size: 2em; */ font-size: 2em; } .raz span { display: inline-block; padding-bottom: 1em; } .raz span a { display: inline-block; /* текстовые ссылки, неразделённые пробелом, смещаются вниз при переполнении */ margin: 0 .4em; padding: 0 .3em; } </style> <div class="raz"><a href="#">Красота</a><span><a href="#">Волосы</a><a href="#">Лицо</a><a href="#">Макияж</a><a href="#">Тело</a><a href="#">Косметология</a><a href="#">Диеты</a><a href="#">Фитнес</a></span></div>