0

是否可以使用 jquery 或 javascript 例程向纯 css 下拉菜单添加鼠标悬停延迟（以免在将鼠标移动到页面上的另一个链接位置时惹恼用户）？

我在这个网站和谷歌上搜索过的大部分材料，建议转到 jquery 或 javascript 类型的菜单。如果可能的话，我想保留一个纯 CSS 菜单，主要用于搜索引擎 SEO 目的。

我尝试在我的“div”和顶级“ul”中添加一些 jquery 超时例程，但无济于事。

代码链接：http: //jsfiddle.net/2fc3W/1/

我的 CSS 是：

<style type="text/css">
.pipe {margin-top:4px;}
.li_hover {color: #002398;}
.bottom_li {margin-bottom:6px;margin-top:2px;}
ul#nav li .bottom_li:hover > a{background:#E0E0E0;}
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
ul#nav li li:hover > a{border:none;}
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
ul#nav li:hover > ul{display:block;}
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;} 
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>}
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
ul#nav ul li:hover ul{display: block;}
</style>

我的 HTML 是：

<div id="menubar">
<ul id="nav">
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
</ul>
</div>

感谢您提供指导我正确方向的任何建议。

4

2 回答 2

2

这是 JavaScript/jQuery 版本：http: //jsfiddle.net/tjfogarty/2fc3W/3/

和 CSS 版本：http: //jsfiddle.net/tjfogarty/2fc3W/4/

请注意，我只是为动画使用了 -webkit- 供应商前缀。同样，您必须注意 CSS 动画的浏览器兼容性。

-webkit-animation: showNav 0.4s forwards;
-webkit-animation-delay: 0.5s;
于 2013-03-08T22:55:15.133 回答
1

可以不使用 jQuery 或 Javascript，但您必须使用 CSS3（或特定于浏览器的类似 css3 的规则，例如 -webkit、-ms 等）。有一个网站可以从 gui 构建您自己的此类菜单。我还没有使用它（甚至还没有下载它），但他们的演示不久前让我大吃一惊：

http://css3menu.com

其实现在很多网站：

https://www.google.com/search?q=css3+menu

于 2013-03-08T22:57:13.013 回答