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

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

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

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

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


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

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

2 ответа

  • 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;
      }

  • 0

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

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

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