Не работают CSS стили

Добрый день. Пытаюсь внедрить новое меню на сайт и естественно оформляю его через CSS.

Но почему-то стили не срабатывают.

Стили как обычно вношу в файлы shop.css и site.css, до этого все вносимые стили срабатывали нормально, но почему-то применительно конкретно к новому выпадающему меню не срабатывают и все тут. Пытался брать и готовые примеры, то же самое...

Меню высвечивается просто деревом, а стили и действия с меню типа появления, скрытия не работают, как и визуальное оформление.


Может кто-то подскажет, в чем может крыться проблема?

Заранее благодарю.

7 ответов

  • 0
    Евгений Эксперт Разработчик 11 декабря 2018 22:56 #

    Кеш чистите в браузере? CTRL+F5?

  • 1
    Алексей Бухтеев 12 декабря 2018 12:33 #

    Код выглядит так:

    HTML

    <header>
  <a href="" class="logo">Лого</a>
  <nav>
      <ul class="topmenu">
        <li><a href="">Главная</a></li>
        <li><a href="" class="submenu-link">О нас</a>
          <ul class="submenu">
            <li><a href="">Производство</a></li>
            <li><a href="">Магазин</a></li>
            <li><a href="">Сервис</a></li>
          </ul>
        </li>
        <li><a href="">Проекты</a></li>
        <li><a href="">Контакты</a></li>
      </ul>
    </nav>
</header>

    CSS

    * { box-sizing: border-box; }
body {
  margin: 0;
  background: #f2f2f2;
}
header {
  background: white;
  text-align: center;
}
header a {
  text-decoration: none;
  outline: none;
  display: block;
  transition: .3s ease-in-out;
}
.logo {
  color: #D5B45B;
  font-family: 'Playfair Display', serif;
  font-size: 2.5em;
  padding: 20px 0;
}
nav {
  display: table;
  margin: 0 auto;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topmenu:after {
  content: "";
  display: table;
  clear: both;
}
.topmenu > li {
  width: 25%;
  float: left;
  position: relative;
  font-family: 'Open Sans', sans-serif;
}
.topmenu > li > a {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  color: #404040;
  padding: 15px 30px;
}
.topmenu li a:hover { color: #D5B45B; }
.submenu-link:after {
  content: "\f107";
  font-family: "FontAwesome";
  color: inherit;
  margin-left: 10px;
}
.submenu {
  background: #273037;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  width: 180px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: .5s ease-in-out;
}
.submenu a {
  color: white;
  text-align: left;
  padding: 12px 15px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.submenu li:last-child a { border-bottom: none; }
.topmenu > li:hover .submenu {
  opacity: 1;
  transform: scaleY(1);
}

    • +1
      Алексей Бухтеев Алексей Бухтеев 12 декабря 2018 13:40 #

      Приоритет стилей тоже пытался поднять посредством инструмента !important и путем прописывания правил для конкретных классов и контейнеров в которых эти стили должны срабатывать. результат опять нулевой

      div #contentDescription nav { box-sizing: border-box!important; }
div #contentDescription body {
  margin: 0!important;
  background: #f2f2f2!important;
}
div #contentDescription header {
  background: white!important;
  text-align: center!important;
}
div #contentDescription header a {
  text-decoration: none!important;
  outline: none!important;
  display: block!important;
  transition: .3s ease-in-out!important;
}
div #contentDescription .logo {
  color: #D5B45B!important;
  font-family: 'Playfair Display', serif!important;
  font-size: 2.5em!important;
  padding: 20px 0!important;
}
div #contentDescription nav {
  display: table!important;
  margin: 0 auto!important;
}
div #contentDescription nav ul {
  list-style: none!important;
  margin: 0!important;
  padding: 0!important;
}
div #contentDescription .topmenu:after {
  content: ""!important;
  display: table!important;
  clear: both!important;
}
div #contentDescription .topmenu > li {
  width: 25%!important;
  float: left!important;
  position: relative!important;
  font-family: 'Open Sans', sans-serif!important;
}
div #contentDescription .topmenu > li > a {
  text-transform: uppercase!important;
  font-size: 14px!important;
  font-weight: bold!important;
  color: #404040!important;
  padding: 15px 30px!important;
}
div #contentDescription .topmenu li a:hover { color: #D5B45B!important; }
div #contentDescription .submenu-link:after {
  content: "\f107"!important;
  font-family: "FontAwesome"!important;
  color: inherit!important;
  margin-left: 10px!important;
}
div #contentDescription .submenu {
  background: #273037!important;
  position: absolute!important;
  left: 0!important;
  top: 100%!important;
  z-index: 5!important;
  width: 180px!important;
  opacity: 0!important;
  transform: scaleY(0)!important;
  transform-origin: 0 0!important;
  transition: .5s ease-in-out!important;
}
div #contentDescription .submenu a {
  color: white!important;
  text-align: left!important;
  padding: 12px 15px!important;
  font-size: 13px!important;
  border-bottom: 1px solid rgba(255,255,255,.1)!important;
}
div #contentDescription .submenu li:last-child a { border-bottom: none!important; }
div #contentDescription .topmenu > li:hover .submenu {
  opacity: 1!important;
  transform: scaleY(1)!important;
}

  • 1
    Светлана Котлова 29 января 2020 13:38 #

    Добрый день.

    Решилась ли Ваша проблема тогда?

    Сейчас столкнулась точно с такой же ситуацией.

    Тоже пытаюсь прописать свою стили для верхнего меню, и они не применяются.

    Ни !important, ни очистка кэш, ни замена тэгов-ничего не помогло.

    По разному пыталась вставить пункты меню, и через специальные блоки, и напрямую в шаблоне-все тщетно..

    Если Вы разобрались с данной ситуацией-подскажите пожалуйста решение.

    Спасибо.

    • +1
      Алексей Бухтеев Алексей Бухтеев 29 января 2020 15:38 #

      Очень давно это было, если честно, уже не помню. Сейчас попытался восстановить в памяти, видимо как-то по-другому реализовал.


      Посмотрите реализацию на сайте www.stylist-shop.ru, если увидите что-то подходящие, кодом с радостью поделюсь!

      • +1
        Светлана Котлова Светлана Котлова 29 января 2020 16:10 #

        Спасибо!

        Красивый сайт у Вас какой!

        Написала разработчикам темы, стили перестали работать после обновлений, скорее всего, ошибка на их стороне.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите