下拉菜单会悬停，但子菜单不会
[英]Drop down menus hover, but sub menus don't
问题描述
Hi I've tried searching for this but just can't find the right coding. 
嗨，我尝试过搜索，但是找不到正确的编码。 Can someone help? 有人可以帮忙吗？ This is my site currently in test mode : http://www.rockclick.co.uk/wiss/index.htm . 这是我目前处于测试模式的网站： http : //www.rockclick.co.uk/wiss/index.htm 。 As you can see I have hoverable menus. 如您所见，我有可悬浮的菜单。 But my sub menus under the "Galleries" hover menu don't hover I have to click on them in my PC browser (google chrome). 但是我的“子菜单”悬停菜单下的子菜单没有悬停，我必须在PC浏览器（谷歌浏览器）中单击它们。 On my iphone the submenus aren't even clickable. 在我的iPhone上，子菜单甚至无法点击。 (I've added a script to fix the hover bug for IOS). （我添加了一个脚本来修复IOS的悬停错误）。 I'm very reluctant to re-write the whole thing again. 我非常不愿意再次重写整个内容。 Is there an easy fix to just make my sub menus hoverable?? 是否有一个简单的修复方法可以使我的子菜单处于可悬浮状态？ I'm very much a novice at this stuff so any help would be greatly appreciated. 我是这方面的新手，因此非常感谢您的帮助。
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
Consider declaring an additional :hover state rule for nested submenu elements, this can be chained onto the existing submenu :hover state rule, eg: 考虑为嵌套子菜单元素声明附加的:hover状态规则，可以将其链接到现有的子菜单:hover状态规则，例如：
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block;
}
Code Snippet Demonstration: 代码段演示：
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
Add the following line to your CSS code. 将以下行添加到您的CSS代码中。 It should fix it. 它应该修复它。
.menus li a:hover ~ .submenu {display: block !important;}
解决方案3
0 2018-01-09 19:21:21
Thanks to the first person who answered, I amended the code and works fine now. 感谢第一个回答的人，我修改了代码，现在可以正常工作了。 Sorry but I don't know how to edit my original post to remove all the code as requested. 抱歉，我不知道如何编辑我的原始帖子，以按要求删除所有代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Ajax带有2个下拉菜单 - Ajax with 2 drop down menus
可靠的下拉菜单 - Dependable Drop Down Menus
两个下拉菜单 - Two Drop Down Menus
按下拉菜单过滤 - filter by drop down menus
链接的下拉菜单 - Linked drop down menus
动态下拉菜单 - dynamic drop down menus
WebdriverJS和下拉菜单 - WebdriverJS and drop down menus
如何使这个下拉菜单出现在点击而不是 hover 上？ - How to make this drop down menus appear on click rather than on hover?
单击时关闭的可悬停下拉菜单 - hover-able drop-down menus that close on click
平板电脑上的下拉菜单 - drop down menus on tablet pcs
相关标签