Настройка меню сайта

Question

Помогите пожалуйста настроить меню.

/* Header */
.header {
    width: 100%;
    position: absolute;
    z-index: 1000;
}

.header__inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Nav */
.nav {
    height: 55px;
    font-size: 25px;
    text-transform: uppercase;
    background-color: black;
    border-bottom: 2px solid red;
    border-left: 2px solid red;
    border-right: 2px solid red;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.nav__link {
    display: inline;
    vertical-align: top;
    margin: 10px 20px;
    position: relative;

    color: blue;
    text-decoration: none;

    background-color: black;

    transition: color .2s linear; 
}

.nav__link:hover {
    color: orange;

    border: 2px solid orange;
    padding: 10px 20px;
}

<header class="header">
        <div class="container">
            <div class="header__inner">
                <nav class="nav">
                    <a class="nav__link" href="#">П</a>
                    <a class="nav__link" href="#">F</a>
                    <a class="nav__link" href="#">L</a>
                    <a class="nav__link" href="#">К</a>
                    <a class="nav__link" href="#">П</a>
                </nav>
            </div>
        </div>
    </header>

Как сделать так, чтобы при наведении на букву, вокруг неё создавалась рамка, которая равна по размеру с неактивными рамками вокруг остальных букв, и не вылазит за размеры самого меню, и не меняет его размеры? И чтобы сами буквы выравнивались по горизонтали меню.

Answer 1

/* Header */

.header {
  width: 100%;
  position: absolute;
  z-index: 1000;
}

.header__inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}


/* Nav */

.nav {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 55px;
  font-size: 25px;
  text-transform: uppercase;
  background-color: black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.nav:before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  border-bottom: 2px solid red;
  border-left: 2px solid red;
  border-right: 2px solid red;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.nav__link {
  float: left;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  position: relative;
  color: blue;
  text-decoration: none;
  background-color: black;
  transition: color .2s linear;
  padding: 0 20px;
  height: 53px;
  line-height: 55px;
  border: 2px solid transparent;
}

.nav__link:hover {
  height: 55px;
  color: orange;
  border: 2px solid orange;
}

.nav__link:nth-child(1) {
  margin-left: 0;
  border-bottom-left-radius: 10px;
}

.nav__link:nth-child(5) {
  border-bottom-right-radius: 10px;
}

<header class="header">
  <div class="container">
    <div class="header__inner">
      <nav class="nav">
        <a class="nav__link" href="#">П</a>
        <a class="nav__link" href="#">F</a>
        <a class="nav__link" href="#">L</a>
        <a class="nav__link" href="#">К</a>
        <a class="nav__link" href="#">П</a>
      </nav>
    </div>
  </div>
</header>

БЛОГ НА HUSL

Настройка меню сайта

Ответы (1 шт):