0

введите сюда описание изображения

Пробовал использовать разные способы. Даже если и было всё в ряд present past can ,но will улетает вниз. Помогите поставить все слова в ряд. Это с анимацией.

body {
  margin: 0;
  background-color: white;
  text-decoration: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topmenu>li {
  width: 35%;
  float: left;
  position: relative;
}

.topmenu>li>a {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
  color: white;
  padding: 30px;
}

.topmenu li a:hover {
  color: #D5B45B;
}

.submenu {
  text-transform: uppercase;
  background: #273037;
  position: absolute;
  z-index: 5;
  width: 200px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: .5s ease-in-out;
}

.submenu a {
  color: white;
  text-align: left;
  padding: 15px;
  font-size: 0.9em;
}

.submenu li:last-child a {
  border-bottom: none;
}

.topmenu>li:hover .submenu {
  opacity: 1;
  transform: scaleY(1);
}

#carousel {
  padding: 0px;
}

#bd {
  font-size: 1.2em;
}

@media (min-width: 1351px) {
  #description1 {
    width: 69%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 17%;
    margin-bottom: 2%;
  }
  #onthispage {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 2.2em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 2.2em;
    font-weight: bold;
  }
}

@media (max-width: 1350px) and (min-width: 1061px) {
  #description1 {
    width: 60%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 18%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 2.3em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1.5em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1.5em;
    font-weight: bold;
  }
}

@media (max-width: 1060px) and (min-width: 821px) {
  #description1 {
    width: 60%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 18%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1.1em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1.1em;
    font-weight: bold;
  }
}

@media (max-width: 820px) and (min-width: 720px) {
  #description1 {
    width: 70%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 15%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1em;
    font-weight: bold;
  }
}

@media (max-width: 719px) and (min-width: 550px) {
  #description1 {
    width: 75%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 12%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1em;
    font-weight: bold;
  }
}

@media (max-width: 549px) and (min-width: 404px) {
  #description1 {
    width: 80%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 10%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 0.8em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 0.8em;
    font-weight: bold;
  }
}

@media (max-width: 403px) {
  #description1 {
    width: 90%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 5%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 0.7em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 0.7em;
    font-weight: bold;
  }
}

.color {
  color: red;
}


/* Footer */

footer {
  background-color: #273037;
  color: white;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

footer p {
  padding: 10.5px;
  margin: 0px;
  line-height: 100%;
  margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="learningenglish, learning english, " />
  <title>learningenglish.com</title>
  <link rel="stylesheet" type="text/css" href="homepagefan.css" />
  <link href="img/learningenglish" rel="shortcuticon" type="image/x-icon" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="#" class="navbar-brand">
      <img src="img/english.png" width="80" height="40" alt="logo" title="Home">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-controls="navbarSupportContent" aria-expend="false" aria-label="ToggleNavigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportContent">
      <ul class="topmenu">
        <li><a href="#" class="submenu-link">Present</a>
          <ul class="submenu">
            <li><a href="#">Present simple</a></li>
            <li><a href="#">Present continuous</a></li>
            <li><a href="#">Present perfect</a></li>
          </ul>
        </li>
        <li><a href="#" class="submenu-link">Past</a>
          <ul class="submenu">
            <li><a href="#">Past simple</a></li>
            <li><a href="#">Past continuous</a></li>
            <li><a href="#">Past perfect</a></li>
          </ul>
          <li><a href="#" class="submenu-link">Can, Will</a>
            <ul class="submenu">
              <li><a href="#">Can ,Could</a></li>
              <li><a href="#">Will, Would</a></li>
            </ul>
      </ul>
    </div>
  </nav>

  <div class="container-fluid" id="carousel">
    <div id="carouselHome" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li class="active" data-target="carouselHome" data-slide-to="0"></li>
        <li class="active" data-target="carouselHome" data-slide-to="2"></li>
        <li class="active" data-target="carouselHome" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/city1.jpg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="img/city2.jpg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="img/city3.jpg" alt="" class="d-block w-100">
        </div>
      </div>
      <a href="#carouselHome" class="carousel-control-prev" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a href="#carouselHome" class="carousel-control-next" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

  <div id="description1">
    <p id="onthispage">On this site you can find:</p>
    <p id="text1"><span class="color">Basic grammar English rules</span> (you can learn the rules that are easy to understand and to learn).</p>
    <p id="text2"><span class="color">Exercises in English</span> (you can do any exercises for Past, Present and Future).</p>
  </div>

  <footer>
    <p>Privacy policy © 2018 All rights reserved.</p>
  </footer>
</body>

</html>

1

1 ответ 1

1

Можно попробовать так (внесите правки в свой код):

HTML

<ul class="navbar-nav topmenu">
    <li class="nav-item">
        <a href="#" class="nav-link submenu-link">Present</a>
        <ul class="submenu">
            <li><a href="#">Present simple</a></li>
            <li><a href="#">Present continuous</a></li>
            <li><a href="#">Present perfect</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link submenu-link">Past</a>
        <ul class="submenu">
            <li><a href="#">Past simple</a></li>
            <li><a href="#">Past continuous</a></li>
            <li><a href="#">Past perfect</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link submenu-link">Can, Will</a>
        <ul class="submenu">
            <li><a href="#">Can ,Could</a></li>
            <li><a href="#">Will, Would</a></li>
        </ul>
    </li>
</ul>

CSS

.topmenu>li {
    /* width: 35%; */
    /* float: left; */
    position: relative;
}

Почему отказались от стандартного меню navbar который есть в bootstrap v4.0? Там же есть поддержка двухуровневого меню

UPD

По поводу .dropdown-item:hover, .dropdown-item:focus

Сначала подключаете файл стилей bootstrap, потом свои файлы стилей:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/style.css">

В своем файле (в примере выше style.css) пишете, например:

.dropdown-item:hover, .dropdown-item:focus {
    background-color: red;
}

На тесте работает, при наведении или фокусе фон .dropdown-item будет красным. Рекомендую разобраться с каскадированием стилей.

4
  • Спасибо, помогло. Может вы знаете у меня почему то не работает hover и focus. хотя я пробовал прописывать их .dropdown-item:hover, .dropdown-item:focus {color: #FFD700;} и так .dropdown-item a:hover, .dropdown-item a:focus {color: #FFD700;} ,и .dropdown-item li a:hover, .dropdown-item li a:focus {color: #FFD700;} 4 апр 2018 в 19:06
  • Свой файл css нужно подключать после bootstrap. Посмотрите как определены стили .dropdown-item:hover и .dropdown-item:focus на элементах, и так же перепишите свойства в своем css
    – RaZik
    4 апр 2018 в 19:09
  • Не очень вас понимаю. Я смотрел сайт bootstrap и там написано что я должен написать -hover ,то есть .dropdown-item-hover. Я так сделал, но всё же не сработало. 4 апр 2018 в 20:39
  • обновил ответ. В документации не нашел упоминания о том, что нужно определить стили классов "dropdown-item-hover"
    – RaZik
    4 апр 2018 в 21:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.