Блог

Мне нужно внести несколько изменений в меню веб-сайта моей компании, включая выпадающее меню. Дело в том, что наш веб-сайт создан с помощью Prestashop, что немного испортило иерархию HTML. Это в значительной степени выглядит так:

 <ul class ="menu">
    <li>
        <a href="" class="sf-with-menu">
        <ul class ="submenu">
            <li>
                <a href="">
            </li>
            <li>
                <a href="">
            </li>
        </ul>
    </li>
</ul>
  

Я хочу, чтобы ul при .submenu наведении курсора открывался класс .sf-with-menu with , который находится на одном уровне в иерархии страницы. Это возможно только с помощью CSS? Я очень ограничен в Prestashop в отношении HTML, поскольку я читал, что изменение HTML в основном нарушит все, когда мы обновляем наши модули, поэтому я хотел бы придерживаться CSS, только если это возможно.

Я полагаю, вы могли бы использовать селектор, который выбирает «элементы, которые [помещаются] сразу после (не внутри) первого указанного элемента», например:

 <ul class ="menu">
    <li>
        <a href="" class="sf-with-menu">Anchor</a>
        <ul class ="submenu">
            <li>
                <a href="">One
            </li>
            <li>
                <a href="">Two
            </li>
        </ul>
    </li>
</ul>


<style>
  .submenu {
    display: none;
  }
  .sf-with-menu:hover   .submenu {
    display: initial;
  }
</style>
  

Это применяет стили к каждому экземпляру .submenu , размещенному сразу после .sf-with-menu , при наведении курсора .sf-with-menu мыши.

Однако, как вы можете видеть в этой демонстрации, будет выделен только первый экземпляр, поэтому, если у вас есть структура:

 .menu
    li
     .sf-with-menu
     .submenu
         // stuff in menu
     .submenu
         // stuff in menu
  

… тогда submenu при наведении будет открыт только первый.

Смотрите здесь для получения дополнительной информации о CSS.