Question

有一天，我希望不要成为这样的新手，但有时候这种情况有些难以理解！

行。我有一个导航栏，隐藏的li项目在悬停时可见。

以下是导航的代码：

<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显示悬停状态）。

现在我想我可以自己解决这个问题，但是你可以在实况页面上看到，如果用户位于内部列表的页面上并且该列表可见，那么如果它们悬停在其他导航选项卡上，然后那些内部列表会重叠。这是一个问题。

希望最后一句有意义！

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

清除泥土？

Answer 1

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

您要做的是创建一个Javascript函数，该函数将在ul＃navbar的任何元素的“mouseover”事件中触发。此函数将使显示的任何内部列表被隐藏，并显示该菜单元素的正确内部列表。

Answer 2

我建议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?

的一些输入

Answer 3

我建议如下。在您要显示的页面上，为li提供一个active。

类

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

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

此外，你想要取消那个li的悬停可能性，因为如果你不这样做，每当有人在其上盘旋时，子菜单将在用户徘徊后隐藏。

所以，

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

我认为应该照顾它。

祝你好运。

Answer 4

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

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

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

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

当页面处于活动状态时，可以使隐藏列表的hovor状态可见

4 个答案: