下拉菜单会悬停，但子菜单不会
[英]Drop down menus hover, but sub menus don't
问题描述
嗨，我尝试过搜索，但是找不到正确的编码。 有人可以帮忙吗？ 这是我目前处于测试模式的网站： http : //www.rockclick.co.uk/wiss/index.htm 。 如您所见，我有可悬浮的菜单。 但是我的“子菜单”悬停菜单下的子菜单没有悬停，我必须在PC浏览器（谷歌浏览器）中单击它们。 在我的iPhone上，子菜单甚至无法点击。 （我添加了一个脚本来修复IOS的悬停错误）。 我非常不愿意再次重写整个内容。 是否有一个简单的修复方法可以使我的子菜单处于可悬浮状态？ 我是这方面的新手，因此非常感谢您的帮助。
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
<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>
<!------------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>
3 个解决方案
解决方案1
0 已采纳 2018-01-09 19:11:14
考虑为嵌套子菜单元素声明附加的: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; }
<!------------NAVIGATION-BAR------> <body> <nav> <ul id='menu'> <li><a href="home.htm" target="iframe">Home</a></li> <li><a href="news.htm" target="iframe">News</a></li> <li><a class='prett' href='#' title='Info'>Information</a> <ul class='menus'> <li><a href='about us.htm' title='About Us' target="iframe">About Us</a></li> <li><a href='stats.htm' title='committee' target="iframe">Statistics</a></li> <li><a href='docs.htm' title='documents downloads' target="iframe">Downloads</a></li> <li><a href='sponsorship.htm' title='Sponsorship' target="iframe">Sponsorship</a></li> <li><a href='calendar.htm' title='Calendar' target="iframe">Race Calendar</a></li> <li><a href="results.htm" target="iframe">Race Results</a></li> </ul> </li> <li><a class='prett' href='#' title='Info'>Meet The Team</a> <ul class='menus'> <li><a href='the team.htm' title='the team' target="iframe">The Team</a></li> <li><a href='coaches.htm' title='coaches' target="iframe">The Coaches</a></li> <li><a href='committee.htm' title='committee' target="iframe">The Committee</a></li> </ul> </li> <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> <li class='has-submenu'><a class='prett' title='Archives'>Archives</a> <ul class='submenu'> <li><a href="archives 1980s.htm" target="iframe">1980's</a></li> <li><a href="archives 1990s.htm" target="iframe">1990's</a></li> <li><a href="archives 2000s.htm" target="iframe">2000's</a></li> </ul> </li> </ul> </li> <li><a href="contact.htm" target="iframe">Contact Us</a></li> <li><a href="links.htm" target="iframe">Links</a></li> </ul> </nav> </body>
解决方案2
0 2018-01-09 19:17:15
将以下行添加到您的CSS代码中。 它应该修复它。
.menus li a:hover ~ .submenu {display: block !important;}
解决方案3
0 2018-01-09 19:21:21
感谢第一个回答的人，我修改了代码，现在可以正常工作了。 抱歉，我不知道如何编辑我的原始帖子，以按要求删除所有代码。
如何使这个下拉菜单出现在点击而不是 hover 上？
[英]How to make this drop down menus appear on click rather than on hover?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.