Это поможет вам начать работу, хотя и далеко не идеально. Как указали Зеты, без дочернего комбинатора, что создает глубоко вложенное меню. это не только сложно, но и приводит к плохому коду.

Вам нужно убедиться, что вы точно знаете, на что нацелен каждый из ваших селекторов. Вы хотите, чтобы ваш второй и третий уровень li вели себя по-разному, поэтому вы должны быть уверены, что ваш селектор для второго уровня не влияет также на третий.

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

На вашем месте я бы просмотрел ваш код и убедился, что вы точно знаете, на что нацелены ваши селекторы, а затем переписал бы ваш CSS. Это не так сложно сделать, и это может привести к удивительно небольшому количеству кода для очень сложных вложенных меню.

html (только для пункта меню третьего уровня)

...
<!-- the rest of the menu -->
  <li>
    <a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a>
    <ul>
      <li>Submenu1</li>
      <li>Submenu2</li>
    </ul>
  </li>
<!-- the rest of the menu -->
...

css (только для третьего уровня)

.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }

И только несколько примеров того, как выбирать меню и элементы разных уровней:

css (для таргетинга на «элементы заголовка»)

.menu > ul > li { }

css (для таргетинга на первое раскрывающееся меню)

.menu > ul > li > ul { }

css (для таргетинга на первые выпадающие элементы)

.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }

css (для таргетинга подменю на выпадающий элемент)

.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }

css (для таргетинга на элемент подменю раскрывающегося списка)

.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }

Что мы можем сделать из приведенного выше кода, так это то, что вы не хотите прекращать использовать дочерний комбинатор, пока не окажетесь на последнем уровне своего меню. В общем, menu ul[n] li, где я использую псевдокод для представления n количества uls, будет нацелен на любой li глубже, чем n глубина в вашем меню. . Так что в вашем случае можно использовать .menu ul ul ul li, поскольку третий уровень является последним. Но вы не хотели бы использовать .menu ul ul li для написания стиля, предназначенного только для первого раскрывающегося списка, поскольку этот селектор также нацелен на третью, четвертую и так далее глубину.

Для полноты картины минимум, чтобы получить работающее глубоко вложенное меню, делается следующим образом:

Вы хотите, чтобы все после первого ul начиналось как скрытое. Итак, вы можете сделать:

.menu ul ul { visibility: hidden; }

Это скрывает любой ul, вложенный в другой ul. Таким образом, он попадает во все наши подменю. И это относится только к спискам в нашем меню.

Затем вы хотите, чтобы каждое подменю было видно, когда вы наводите курсор на родительскую ссылку. Я думаю, мы можем обрабатывать все наши подменю с помощью одного селектора:

.menu li:hover > ul { visibility: visible; }

Это должно быть достаточно общим, чтобы применяться к каждому уровню меню. Читая справа налево, мы делаем ul видимым, когда наводим курсор на li, который является его непосредственным родителем. И, как обычно, это относится только к элементу li, который находится в нашем меню.

Конечно, вы также можете использовать a, если хотите.

CSS-меню — отличное время, чтобы подумать и узнать о эффективность CSS. Если у вас есть рабочее меню, посмотрите, сможете ли вы его оптимизировать! Теги, которые я разместил здесь, возможно, не самые быстрые; Я просто подумал о них из головы. Я оставлю это вам, чтобы найти лучшие селекторы для использования.

И это действительно основы сложных вложенных меню CSS. Надеюсь, поможет.