2

有朝一日，我希望在这些东西上不要成为新手，但有时其中一些感觉如此难以克服！

好的。我有一个导航栏，其中包含隐藏的 li 项目，当悬停时可见。

这是现场直播： http ://www.rattletree.com

这是导航的代码：

<ul id="navbar">
  <li id="iex"><a href="index.php">About Rattletree</a></li>
  <li id="upcomgshows"><a href="upcomingshows.php">Calendar</a></li>
  <li id="sods"><a href="#">Sights &amp; Sounds</a>
     <ul class="innerlist">
         <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
         <li class="innerlist"><a href="/playlist.m3u" target="_blank" onclick="javascript:BatmoAudioPop('Rattletree Marimba',this.href,'1'); return false">Listen</a></li>
         <li class="innerlist"><a href="/new_pictures.php">Photos</a></li>
         <li class="innerlist"><a href="/video.php">Video</a></li>
    <li class="innerlist"><a href="/press.php">Press</a></li>
     </ul>
  </li>
  <li id="bookin"><a href="#">Contact</a>
   <ul class="innerlist">
          <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
          <li class="innerlist"><a href="/booking.php">Booking Info</a></li>
          <li class="innerlist"><a href="/media.php">Media Inquiries</a></li>
   </ul>
  </li>
  <li id="ste"> <a href="/sounds.php">Store</a></li>
  <li id="instrumes"><a href="/instruments.php">The Instruments</a></li>
  <li id="classe"><a href="classes.php">Workshops</a></li>
 </ul>

CSS：

div#navbar2 {
background-color:#546F8B;
border-bottom:1px solid #546F8B;
border-top:1px solid #000000;
display:inline-block;
position:relative;
width:100%;
}
div#navbar2 ul#navbar {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
letter-spacing:1px;
margin:10px 0;
padding:0;
white-space:nowrap;
}

div#navbar2 ul#navbar li ul.innerlist {
color:#000000;
display:none;
position:relative;
z-index:20;
}

div#navbar2 ul#navbar li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
position:relative;
}

现在我想做的有点棘手：如果用户导航到其中一个内部列表页面，我希望该内部列表 ul 保持可见（特定 li 显示悬停状态）。

现在我想我可以自己解决这个问题，但是您可以在实时页面上看到，如果用户在内部列表的页面上并且该列表可见，那么如果他们将鼠标悬停在另一个导航选项卡上，那么那些内部列表会重叠。这是个问题。

希望最后一句话说得通！

简而言之：我需要保持显示活动页面的内部列表，但是如果用户将鼠标悬停在另一个带有它自己的内部列表的导航按钮上，那么实时内部列表需要消失。

清如泥？

4

4 回答 4

0

您将需要使用 Javascript 来处理此问题。您将无法完全使用 CSS 来做到这一点。

您要做的是创建一个 Javascript 函数，该函数将在 ul#navbar 的任何元素的“鼠标悬停”事件上触发。此功能将隐藏任何正在显示的内部列表，并显示该菜单元素的正确内部列表。

于 2010-05-08T05:41:45.403 回答
0

我建议使用jQuery，因为它为您提供了用于此类事情的完整工具集。但基本上让我们假设您拥有上面声明的 CSS。

$("ul#navbar li ul.innerlist").show()

或者

$("ul#navbar li ul.innerlist").hide()

这些将允许您控制您的可见性状态。您将这些绑定到父母：

$("div#navbar2 ul#navbar li").hover(function() {
  $("ul", this).show();
});

从How to get the children of the $(this) selector 得到一些输入？

于 2010-05-08T05:54:01.403 回答
0

也可以仅使用 CSS 完成，请参阅：http ://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/

小心，你可能会在大型网站上遇到性能问题：悬停在元素上，这些元素是 IE 中的 noch 锚点 -.-

避免 :hover 用于 IE 客户端的非链接元素的伪选择器。如果您在非锚元素上使用 :hover，请在 IE7 和 IE8 中测试页面以确保您的页面可用。如果您发现 :hover 导致性能问题，请考虑有条件地为 IE 客户端使用 JavaScript onmouseover 事件处理程序。

-> http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

于 2010-10-10T14:01:51.323 回答
0

我建议以下。在您显示的页面上，给 li 一个active.

然后使用 jQuery，执行以下操作：

$('li.active > ul').show();

此外，您希望取消该 li 的悬停可能性，因为如果您不这样做，每当有人悬停在其上时，子菜单将在用户悬停后隐藏。

所以，

$('li.active').hover(function() {
  $('li.active > ul').show();
});

我想，这应该照顾好它。

祝你好运。

于 2010-09-05T23:04:52.790 回答