这是一款jQuery仿百度知道导航菜单，绿色宽屏的下拉导航菜单样式代码。这是一款非常实用的宽屏导航菜单代码。

使用方法

在页面引入相关JS文件jquery.min.js

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   
$('.nav-menu-content-box').hover(function() {
  $(this).addClass('dow-hover');
  $(".nav-menu-content").show('slow');
}, function() {
  $(this).removeClass('dow-hover');
});
   
});
   
var maxHeight = 400;
   
$(function(){
   
$(".nav-menu-content-box > li").hover(function() {
   
  var $container = $(this),
      $list = $container.find("ul"),
      $anchor = $container.find("a"),
      height = $list.height() * 1.1,
      multiplier = height / maxHeight;
   
  $container.data("origHeight", $container.height());
   
  $anchor.addClass("hover");
   
  $list
      .show()
      .css({
          paddingTop: $container.data("origHeight")
      });
   
  if (multiplier > 1) {
      $container
          .css({
              height: maxHeight,
              overflow: "hidden"
          })
          .mousemove(function(e) {
              var offset = $container.offset();
              var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
              if (relativeY > $container.data("origHeight")) {
                  $list.css("top", -relativeY + $container.data("origHeight"));
              };
          });
  }
   
}, function() {
   
  var $el = $(this);
   
  $el
      .height($(this).data("origHeight"))
      .find("ul")
      .css({ top: 0 })
      .hide()
      .end()
      .find("a")
      .removeClass("hover");
   
});
   
});
   
</script>

CSS样式

<link href="css/base.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>