Блог

Мой веб-сайт www.teamanco.com У меня возникли проблемы с наведением курсора мыши на мое вложенное меню. Если вы перейдете на второй уровень, все в порядке, но в меню на третьем уровне неправильно выбран / наведен указатель мыши. Помочь? Я понятия не имею, с чего начать. Я построен на Shopify.

 }
.main-nav {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
.main-nav > li:hover > ul {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  height: auto;
  overflow: visible;
}
.main-nav > li:hover > ul > li:hover > a {
  color: {{ settings.main_nav_link_hover }};
  background-color: #eaeaea;
}
.main-nav > li:hover > ul > li:hover > ul {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  height: auto;
  overflow: visible;
}
.main-nav > li:hover > ul > li:hover > ul > li:hover > a {
  color: {{ settings.main_nav_link_hover }};
  background-color: #eaeaea;
}
.main-nav > li:hover > ul > li:hover > ul > li:hover > ul {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  height: auto;
  overflow: visible;
}
.main-nav > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > a {
  color: {{ settings.main_nav_link_hover }};
  background-color: #eaeaea;
}
.main-nav > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > ul {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  height: auto;
  overflow: visible;
}
.main-nav > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > a {
  color: {{ settings.main_nav_link_hover }};
  background-color: #eaeaea;
}
.main-nav > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > ul {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  height: auto;
  overflow: visible;
}
.main-nav > li {
  float: left;
  margin-left: 60px;
  border-top: solid 2px transparent;
  margin-top: -2px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  position: relative;
}
.main-nav > li:first-child {
  margin-left: 0px;
}
.main-nav > li.active {
  border-top: solid 2px {{ settings.main_nav_link }};
}
.main-nav > li.active > a {
  color: {{ settings.main_nav_link_hover }};
}
.main-nav > li:hover {
  border-top: solid 2px {{ settings.main_nav_link }};
}
.main-nav > li:hover > a {
  color: {{ settings.main_nav_link_hover }};
}
.main-nav > li > a {
  font-family: "{{ settings.secondary_font }}", Arial, sans-serif;
  font-size: 16px;
  padding:12px 0px 11px;
  float:left;
  color: {{ settings.main_nav_link }};
  text-decoration: none;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.main-nav > li > a.has-dropdown {
  position: relative;
}
.main-nav > li > a.has-dropdown:after {
  content: "";
  position: absolute;
  border-right: 4px solid transparent;
  border-top: 4px solid {{ settings.main_nav_link }};
  border-left: 4px solid transparent;
  border-top-color: {{ settings.main_nav_link }};
  top: 7px;
  right: -14px;
}
.main-nav > li > ul {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 150px;
  background-color: #f2f2f2;
  padding: 10px 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  list-style: none;
  margin: 0;
  z-index: 201;
  -webkit-border-radius: 0 0 4px 4px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 4px 4px;
  -moz-background-clip: padding;
  border-radius: 0 0 4px 4px;
  background-clip: padding-box;
  height: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.main-nav > li > ul > li {
  float: left;
  width: 100%;
  position: relative;
}
.main-nav > li > ul > li:hover > a {
  color: {{ settings.main_nav_link_hover }};
  background-color: #eaeaea;
}
.main-nav > li > ul > li > a {
  float: left;
  width: 100%;
  padding: 10px 15px;
  font-family: "{{ settings.secondary_font }}", Arial, sans-serif;
  font-size: 14px;
  color: {{ settings.main_nav_link }};
  text-decoration: none;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.main-nav > li > ul > li ul {
  position: absolute;
  top: 0px;
  left: 100%;
  width: 150px;
  background-color: #f2f2f2;
  padding: 10px 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  list-style: none;
  margin: 0;
  z-index: 200;
  -webkit-border-radius: 0 0 4px 4px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 4px 4px;
  -moz-background-clip: padding;
  border-radius: 0 0 4px 4px;
  background-clip: padding-box;
  height: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.main-nav > li > ul > li ul li {
  float: left;
  width: 100%;
  position: relative;
}
.main-nav > li > ul > li ul li a {
  float: left;
  width: 100%;
  padding: 10px 15px;
  font-family: "{{ settings.secondary_font }}", Arial, sans-serif;
  font-size: 14px;
  color: {{ settings.main_nav_link }};
  text-decoration: none;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
  

Если вы проведете мышью влево и вправо по верхнему уровню навигации, вы увидите ту же проблему, которую вы описали, при наведении курсора на второй уровень. После того, как вы уберете курсор мыши, появляется узкий серый прямоугольник, который на мгновение зависает, и список исчезает. Это вызвано заполнением <ul> тегов. Удалите эти строки и посмотрите, устраняет ли это проблему:

 .main-nav > li > ul {
  ...
  padding: 10px 0;
  ...
}

.main-nav > li > ul > li ul {
  ...
  padding: 10px 0;
  ...
}
  

Кажется, что элементы списка ( <li> ) мгновенно исчезают, когда вы отводите курсор мыши, но непрозрачность <ul> (которая теперь содержит только отступы) исчезает с переходом.