下拉菜单悬停，但子菜单不是

时间：2018-01-09 18:58:40

标签： javascript jquery html css

您好我已经尝试过搜索，但却无法找到正确的编码。有人可以帮忙吗？ 这是我的网站目前处于测试模式：http://www.rockclick.co.uk/wiss/index.htm。 如你所见，我有可爱的菜单。但是我的子菜单在＆＃34; Galleries＆＃34;悬停菜单不要悬停我必须在我的PC浏览器（谷歌浏览器）中点击它们。在我的iPhone上，子菜单甚至无法点击。 （我已经添加了一个脚本来修复IOS的悬停错误）。 我非常不愿意再次重写整件事。是否有一个简单的解决方案，只是让我的子菜单可以恢复？ 我非常喜欢这个东西，所以任何帮助都会非常感激。

＆＃13;
＆＃13; 
document.addEventListener('click', function(e) {
  e = e || window.event;
  console.log(e);
  var target = e.target || e.srcElement;
  console.log(target);
  if (target.parentElement.className.indexOf('has-submenu') > -1) {
    e.target.classList.toggle('open');
  }
}, false);

<!----------------ios-hover-fix----------->
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS
＆＃13; 
<style>
#menu {background: #F9F3DB; color: #6D6C6B; height: 35px; border-bottom: 0px solid #6D6C6B}
#menu ul,
#menu li {margin: 0 0; padding: 0 0; list-style: none}
#menu ul {height: 35px}
#menu li {float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 0px 0 #6D6C6B; border-right: 0px solid #444;
  border-left: 0px solid #111; text-transform: uppercase}

#menu li:first-child {border-left: none}
#menu a {display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #6D6C6B;}
#menu li:hover > a,
#menu li a:hover {background: #F9F3DB}
#menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menu label {font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center}
#menu label span {font-size: 12px; position: absolute; left: 35px}
#menu ul.menus {height: auto; width: auto; background: #F9F3DB; position: absolute; z-index: 99; display: none; border: 0;}
#menu ul.menus li {display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menu li:hover ul.menus {display: block}
#menu a.home {background: #c00;}
#menu a.prett {padding: 0 27px 0 14px}
#menu a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 5px 6px;
  border-style: solid;
  border-color: #6D6C6B transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px}

#menu a.prett.open::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: transparent transparent #6D6C6B transparent;
  position: absolute;
  top: 9px;
  right: 9px}

#menu ul.menus a:hover {background: #F9F3DB;}
#menu ul.menus .submenu {display: none; position: absolute; left: 100px; background: #F9F3DB; top: 0; width: 150px;}
#menu ul.menus .submenu li {background: #F9F3DB;}
#menu ul.menus .has-submenu a.open ~ .submenu {display: block;}

</style>
＆＃13; 
<!------------NAVIGATION-BAR------>
<body>
<nav>
  <ul id='menu'>
    	<li><a class='prett' href='#' title='Galleries'>Galleries</a>
 	<ul class='menus'>
	<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
 	<ul class='submenu'>      	
        <li><a href="gallery 2017.htm" target="iframe">2017</a></li>
        <li><a href="gallery 2016.htm" target="iframe">2016</a></li>
        <li><a href="gallery 2015.htm" target="iframe">2015</a></li>
	</ul></li>
     
	<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
 	<ul class='submenu'>      	
        <li><a href="media.htm" target="iframe">Press Reports</a></li>
        <li><a href="archive media.htm" target="iframe">Archived Press</a></li>
        </ul></li>

   	<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
	<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>

	</ul></li>	
</nav>
</body>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

考虑为嵌套子菜单元素声明一个额外的echo '<br><strong>'.__('Order notes').':</strong> ' . ( $order->id, '_order_comments', true ) ; 状态规则，这可以链接到现有的子菜单:hover状态规则，例如：

:hover

代码段示范： 

#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
    display: block;
}

document.addEventListener('click', function(e) {
  e = e || window.event;
  console.log(e);
  var target = e.target || e.srcElement;
  console.log(target);
  if (target.parentElement.className.indexOf('has-submenu') > -1) {
    e.target.classList.toggle('open');
  }
}, false);

<!----------------ios-hover-fix----------->
(function(l) {
  var i, s = {
    touchend: function() {}
  };
  for (i in s) l.addEventListener(i, s)
})(document); // sticky hover fix in iOS
#menu {
  background: #F9F3DB;
  color: #6D6C6B;
  height: 35px;
  border-bottom: 0px solid #6D6C6B
}

#menu ul,
#menu li {
  margin: 0 0;
  padding: 0 0;
  list-style: none
}

#menu ul {
  height: 35px
}

#menu li {
  float: left;
  display: inline;
  position: relative;
  font: bold 12px Arial;
  text-shadow: 0 0px 0 #6D6C6B;
  border-right: 0px solid #444;
  border-left: 0px solid #111;
  text-transform: uppercase
}

#menu li:first-child {
  border-left: none
}

#menu a {
  display: block;
  line-height: 35px;
  padding: 0 14px;
  text-decoration: none;
  color: #6D6C6B;
}

#menu li:hover>a,
#menu li a:hover {
  background: #F9F3DB
}

#menu input {
  display: none;
  margin: 0 0;
  padding: 0 0;
  width: 80px;
  height: 35px;
  opacity: 0;
  cursor: pointer
}

#menu label {
  font: bold 30px Arial;
  display: none;
  width: 35px;
  height: 36px;
  line-height: 36px;
  text-align: center
}

#menu label span {
  font-size: 12px;
  position: absolute;
  left: 35px
}

#menu ul.menus {
  height: auto;
  width: auto;
  background: #F9F3DB;
  position: absolute;
  z-index: 99;
  display: none;
  border: 0;
}

#menu ul.menus li {
  display: block;
  width: 100%;
  font: 12px Arial;
  text-transform: none;
}

#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
  display: block
}

#menu a.home {
  background: #c00;
}

#menu a.prett {
  padding: 0 27px 0 14px
}

#menu a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 5px 6px;
  border-style: solid;
  border-color: #6D6C6B transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px
}

#menu a.prett.open::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: transparent transparent #6D6C6B transparent;
  position: absolute;
  top: 9px;
  right: 9px
}

#menu ul.menus a:hover {
  background: #F9F3DB;
}

#menu ul.menus .submenu {
  display: none;
  position: absolute;
  left: 100px;
  background: #F9F3DB;
  top: 0;
  width: 150px;
}

#menu ul.menus .submenu li {
  background: #F9F3DB;
}

#menu ul.menus .has-submenu a.open~.submenu {
  display: block;
}

答案 1 :(得分：0)

将以下行添加到CSS代码中。它应该解决它。

.menus li a:hover ~ .submenu {display: block !important;}

答案 2 :(得分：0)

感谢第一个回答的人，我修改了代码，现在工作正常。抱歉，我不知道如何编辑原始帖子以删除所有代码。

相关问题
最新问题