下拉菜單會懸停，但子菜單不會
[英]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.