jqdriver
/
navselect.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/layout.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jqdriver.js"></script>
<title>下拉导航</title>
<style>
/*导航*/
.nav {width:100%; height:50px; position:absolute; top:0; right:0; background-color:#08c;}
.nav>ul>li {float:left; white-space:nowrap; height:50px; line-height:50px; position:relative; margin:0 22px;}
.nav>ul>li>a {padding:0 14px; display:block; color:#fff; font-size:14px; text-transform:uppercase;}
.nav>ul>li:hover>a, .nav>ul>li>a:hover {color:#fff; background-color:#037ebb;}
.nav>ul>li:last-child {margin-right:0;}
.nav .navselect {position:absolute; top:43px; z-index:10; display:none;}
.nav .navselect>dl:before {content:""; display:block; margin-left:20px;
width:0;
height:0;
border-style:solid;
border-width:0 7px 7px 7px;
border-color:transparent transparent #1cad20 transparent;}
.nav .navselect.on_first>dl:before {border-color:transparent transparent #feb81a transparent;}
.nav .navselect>dl>dd {position:relative;}
.nav .navselect>dl>dd>a {height:35px; line-height:35px; font-size:14px; background-color:#1cad20; padding:0 20px; color:#fff; display:block; white-space:nowrap;}
.nav .navselect.on_first>dl>dd:first-child>a, .nav .navselect>dl>dd>a:hover {background-color:#feb81a; color:#fff;}
/*三级分类*/
.nav .navselect2 {position:absolute; top:0; right:0; transform:translateX(100%); display:none;}
.nav .navselect2>dl>dd {position:relative;}
.nav .navselect2>dl>dd>a {height:24px; line-height:24px; font-size:14px; background-color:#18a21b; display:block; padding:0 20px; color:#fff;}
.nav .navselect2>dl>dd>a:hover {background-color:#feb81a; color:#fff;}
</style>
</head>

<body>

<div class="nav">
  <ul class="aclear">
    <li><a href="javascript:void(0)">首页</a></li>

    <li jdNavSelect="navselect" jdNavSelectFade="100"><a href="javascript:void(0)">人物</a>
      <div class="navselect">
        <dl>
          <dd><a href="javascript:void(0)">砂糖</a></dd>
          <dd><a href="javascript:void(0)">甘雨</a></dd>
          <dd><a href="javascript:void(0)">刻晴</a></dd>
          <dd><a href="javascript:void(0)">香菱</a></dd>
        </dl>
      </div>
    </li>

    <li jdNavSelect="navselect" jdNavSelectFade="100"><a href="javascript:void(0)">三级导航</a>
      <div class="navselect">
        <dl>
          <dd jdNavSelect="navselect2" jdNavSelectFade="100"><a href="javascript:void(0)">砂糖</a>
            <div class="navselect2">
              <dl>
                <dd jdNavSelect="navselect3" jdNavSelectFade="100"><a href="javascript:void(0)">简介</a></dd>
                <dd><a href="javascript:void(0)">攻略</a></dd>
              </dl>
            </div>
          </dd>
          <dd><a href="javascript:void(0)">甘雨</a></dd>
          <dd><a href="javascript:void(0)">刻晴</a></dd>
          <dd><a href="javascript:void(0)">香菱</a></dd>
        </dl>
      </div>
    </li>
  </ul>
</div>

<script type="text/javascript">
const jd = $('body').jqdriver({
  active: 'on',  //活动css类名
});
</script>

</body>
</html>