maxselivanov0
@maxselivanov0

Как поправить данное меню?

Нужно сделать так, чтобы меню не выезжало за правый край. Как это сделать?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="MENUTESTSTYLE.css" />
    <title>TEST</title>
  </head>
  <body>
    <div id="wrapper">
      <nav class="MainMenuAll">
        <ul class="MainMenu">
          <li class="li"><a class="Menu" href="Main.html">Главная</a></li>
          <li class="li"><a class="Menu" href="Статьи.html">Статьи</a></li>
          <li class="li"><a class="Menu" href="О нас.html">О нас</a></li>
          <li class="li"><a class="Menu" href="Контакты.html">Контакты</a></li>
          <li class="li">
            <a class="Menu" href="Регистрация.html">Зарегистрироваться</a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
</html>


#wrapper {
  width: 90vw;
  margin: 0 auto;
}

.MainMenuAll {
  height: 50px;
  width: 940px;
  display: block;
  margin-bottom: 10px;
}
/*Полоса*/
.MainMenuAll ::before {
  content: "";
  display: block;
  height: 50px;
  width: 940px;
  z-index: -1;
  position: absolute;
  top: 0;
  background-color: #cf8eb8;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.MainMenu {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
}
.MainMenu .li {
  float: left;
}
.MainMenuAll .MainMenu .Menu {
  color: black;
  display: block;
  height: 50px;
  padding: 0 30px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 50px;
}
.MainMenu .li .Menu :hover {
  background: #c589bb;
}


5e2f113f12fe7229542867.png
  • Вопрос задан
  • 309 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы