How to solve the problem with the layout of the navigation bar with a description?

Question

css

With position: absolute, the link in the buttons behaves as usual, spreading over the entire area of ​​the li list, but then the description enclosed in the tags is not centered and looks clumsy, not fitting into the button fields. I will be grateful for the answers.

Answer 1

When I was just starting to typeset, I was constantly told that a correctly asked question already contains an answer ...
Suppose you have a structure

<li>
  <a href="#">link</a>
  <span>description</span>
</li>

When there is no paragraph, there should be an empty space below the caption: a {margin-bottom: Xpx}, where X = the height of the paragraph.
When there is a paragraph, white space must be discarded: a:not(:last-child) {margin-bottom: 0}.
The paragraph should be centered, not wrap in words, and stretch the cell to its content li {text-align: center} span {white-space: nowrap}
Do you need this ? codepen.io/olgar/pen/EyNEXK