jquery实现美观的导航菜单鼠标提示特效代码

本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下：

这是一个奇妙的导航菜单鼠标提示特效，俗称“链接提示”，鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容，提示用户到达需要的页面。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/

具体代码如下：

 
body {
 margin: 10px auto;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
 margin: 100px 0 0;
 padding: 0;
 list-style: none;
}
.menu li {
 padding: 0;
 margin: 0 2px;
 float: left;
 position: relative;
 text-align: center;
}
.menu a {
 padding: 14px 10px;
 display: block;
 color: #000000;
 width: 144px;
 text-decoration: none;
 font-weight: bold;
 background: url(images/button.gif) no-repeat center center;
}
.menu li em {
 background: url(images/hover.png) no-repeat;
 width: 180px;
 height: 45px;
 position: absolute;
 top: -85px;
 left: -15px;
 text-align: center;
 padding: 20px 12px 10px;
 font-style: normal;
 z-index: 2;
 display: none;
}




 

  Web Designer Wall  
  A wall of design ideas, web trends, and tutorials
 
 

  Best Web Gallery
  Featuring the best CSS and Flash web sites
 
 

  N.Design Studio
  Blog and design portfolio of WDW designer, Nick La
 

希望本文所述对大家的jquery程序设计有所帮助。