console
function Aa() {
$(".a1").removeClass("hide");
$(".a2").addClass("hide");
$(".a3").addClass("hide");
$(".a4").addClass("hide");
$(".a5").addClass("hide");
$(".a6").addClass("hide");
}
function Ab() {
$(".a1").addClass("hide");
$(".a2").removeClass("hide");
$(".a3").addClass("hide");
$(".a4").addClass("hide");
$(".a5").addClass("hide");
$(".a6").addClass("hide");
}
function Ac() {
$(".a1").addClass("hide");
$(".a2").addClass("hide");
$(".a3").removeClass("hide");
$(".a4").addClass("hide");
$(".a5").addClass("hide");
$(".a6").addClass("hide");
}
function Ad() {
$(".a1").addClass("hide");
$(".a2").addClass("hide");
$(".a3").addClass("hide");
$(".a4").removeClass("hide");
$(".a5").addClass("hide");
$(".a6").addClass("hide");
}
function Ae() {
$(".a1").addClass("hide");
$(".a2").addClass("hide");
$(".a3").addClass("hide");
$(".a4").addClass("hide");
$(".a5").removeClass("hide");
$(".a6").addClass("hide");
}
function Af() {
$(".a1").addClass("hide");
$(".a2").addClass("hide");
$(".a3").addClass("hide");
$(".a4").addClass("hide");
$(".a5").addClass("hide");
$(".a6").removeClass("hide");
}
function Ba() {
$(".b1").removeClass("hide");
$(".b2").addClass("hide");
$(".b3").addClass("hide");
$(".b4").addClass("hide");
$(".b5").addClass("hide");
$(".b6").addClass("hide");
}
function Bb() {
$(".b1").addClass("hide");
$(".b2").removeClass("hide");
$(".b3").addClass("hide");
$(".b4").addClass("hide");
$(".b5").addClass("hide");
$(".b6").addClass("hide");
}
function Bc() {
$(".b1").addClass("hide");
$(".b2").addClass("hide");
$(".b3").removeClass("hide");
$(".b4").addClass("hide");
$(".b5").addClass("hide");
$(".b6").addClass("hide");
}
function Bd() {
$(".b1").addClass("hide");
$(".b2").addClass("hide");
$(".b3").addClass("hide");
$(".b4").removeClass("hide");
$(".b5").addClass("hide");
$(".b6").addClass("hide");
}
function Be() {
$(".b1").addClass("hide");
$(".b2").addClass("hide");
$(".b3").addClass("hide");
$(".b4").addClass("hide");
$(".b5").removeClass("hide");
$(".b6").addClass("hide");
}
function Bf() {
$(".b1").addClass("hide");
$(".b2").addClass("hide");
$(".b3").addClass("hide");
$(".b4").addClass("hide");
$(".b5").addClass("hide");
$(".b6").removeClass("hide");
}
function Ca() {
$(".c1").removeClass("hide");
$(".c2").addClass("hide");
$(".c3").addClass("hide");
$(".c4").addClass("hide");
$(".c5").addClass("hide");
$(".c6").addClass("hide");
}
function Cb() {
$(".c1").addClass("hide");
$(".c2").removeClass("hide");
$(".c3").addClass("hide");
$(".c4").addClass("hide");
$(".c5").addClass("hide");
$(".c6").addClass("hide");
}
function Cc() {
$(".c1").addClass("hide");
$(".c2").addClass("hide");
$(".c3").removeClass("hide");
$(".c4").addClass("hide");
$(".c5").addClass("hide");
$(".c6").addClass("hide");
}
function Cd() {
$(".c1").addClass("hide");
$(".c2").addClass("hide");
$(".c3").addClass("hide");
$(".c4").removeClass("hide");
$(".c5").addClass("hide");
$(".c6").addClass("hide");
}
function Ce() {
$(".c1").addClass("hide");
$(".c2").addClass("hide");
$(".c3").addClass("hide");
$(".c4").addClass("hide");
$(".c5").removeClass("hide");
$(".c6").addClass("hide");
}
function Cf() {
$(".c1").addClass("hide");
$(".c2").addClass("hide");
$(".c3").addClass("hide");
$(".c4").addClass("hide");
$(".c5").addClass("hide");
$(".c6").removeClass("hide");
}
function A() {
$(".A").removeClass("hide");
$(".B").addClass("hide");
$(".C").addClass("hide");
$(".D").addClass("hide");
$(".E").addClass("hide");
$(".F").addClass("hide");
}
function B() {
$(".B").removeClass("hide");
$(".A").addClass("hide");
$(".C").addClass("hide");
$(".D").addClass("hide");
$(".E").addClass("hide");
$(".F").addClass("hide");
}
function C() {
$(".C").removeClass("hide");
$(".A").addClass("hide");
$(".B").addClass("hide");
$(".D").addClass("hide");
$(".E").addClass("hide");
$(".F").addClass("hide");
}
function D() {
$(".D").removeClass("hide");
$(".B").addClass("hide");
$(".C").addClass("hide");
$(".A").addClass("hide");
$(".E").addClass("hide");
$(".F").addClass("hide");
}
function E() {
$(".E").removeClass("hide");
$(".A").addClass("hide");
$(".C").addClass("hide");
$(".D").addClass("hide");
$(".B").addClass("hide");
$(".F").addClass("hide");
}
function F() {
$(".F").removeClass("hide");
$(".A").addClass("hide");
$(".B").addClass("hide");
$(".D").addClass("hide");
$(".E").addClass("hide");
$(".C").addClass("hide");
}
function Da() {
$(".d1").removeClass("hide");
$(".d2").addClass("hide");
$(".d3").addClass("hide");
$(".d4").addClass("hide");
$(".d5").addClass("hide");
$(".d6").addClass("hide");
}
function Db() {
$(".d1").addClass("hide");
$(".d2").removeClass("hide");
$(".d3").addClass("hide");
$(".d4").addClass("hide");
$(".d5").addClass("hide");
$(".d6").addClass("hide");
}
function Dc() {
$(".d1").addClass("hide");
$(".d2").addClass("hide");
$(".d3").removeClass("hide");
$(".d4").addClass("hide");
$(".d5").addClass("hide");
$(".d6").addClass("hide");
}
function Dd() {
$(".d1").addClass("hide");
$(".d2").addClass("hide");
$(".d3").addClass("hide");
$(".d4").removeClass("hide");
$(".d5").addClass("hide");
$(".d6").addClass("hide");
}
function De() {
$(".d1").addClass("hide");
$(".d2").addClass("hide");
$(".d3").addClass("hide");
$(".d4").addClass("hide");
$(".d5").removeClass("hide");
$(".d6").addClass("hide");
}
function Df() {
$(".d1").addClass("hide");
$(".d2").addClass("hide");
$(".d3").addClass("hide");
$(".d4").addClass("hide");
$(".d5").addClass("hide");
$(".d6").removeClass("hide");
}
function Ea() {
$(".e1").removeClass("hide");
$(".e2").addClass("hide");
$(".e3").addClass("hide");
$(".e4").addClass("hide");
$(".e5").addClass("hide");
$(".e6").addClass("hide");
}
function Eb() {
$(".e1").addClass("hide");
$(".e2").removeClass("hide");
$(".e3").addClass("hide");
$(".e4").addClass("hide");
$(".e5").addClass("hide");
$(".e6").addClass("hide");
}
function Ec() {
$(".e1").addClass("hide");
$(".e2").addClass("hide");
$(".e3").removeClass("hide");
$(".e4").addClass("hide");
$(".e5").addClass("hide");
$(".e6").addClass("hide");
}
function Ed() {
$(".e1").addClass("hide");
$(".e2").addClass("hide");
$(".e3").addClass("hide");
$(".e4").removeClass("hide");
$(".e5").addClass("hide");
$(".e6").addClass("hide");
}
function Ee() {
$(".e1").addClass("hide");
$(".e2").addClass("hide");
$(".e3").addClass("hide");
$(".e4").addClass("hide");
$(".e5").removeClass("hide");
$(".e6").addClass("hide");
}
function Ef() {
$(".e1").addClass("hide");
$(".e2").addClass("hide");
$(".e3").addClass("hide");
$(".e4").addClass("hide");
$(".e5").addClass("hide");
$(".e6").removeClass("hide");
}
function Fa() {
$(".f1").removeClass("hide");
$(".f2").addClass("hide");
$(".f3").addClass("hide");
$(".f4").addClass("hide");
$(".f5").addClass("hide");
$(".f6").addClass("hide");
}
function Fb() {
$(".f1").addClass("hide");
$(".f2").removeClass("hide");
$(".f3").addClass("hide");
$(".f4").addClass("hide");
$(".f5").addClass("hide");
$(".f6").addClass("hide");
}
function Fc() {
$(".f1").addClass("hide");
$(".f2").addClass("hide");
$(".f3").removeClass("hide");
$(".f4").addClass("hide");
$(".f5").addClass("hide");
$(".f6").addClass("hide");
}
function Fd() {
$(".f1").addClass("hide");
$(".f2").addClass("hide");
$(".f3").addClass("hide");
$(".f4").removeClass("hide");
$(".f5").addClass("hide");
$(".f6").addClass("hide");
}
function Fe() {
$(".f1").addClass("hide");
$(".f2").addClass("hide");
$(".f3").addClass("hide");
$(".f4").addClass("hide");
$(".f5").removeClass("hide");
$(".f6").addClass("hide");
}
function Ff() {
$(".f1").addClass("hide");
$(".f2").addClass("hide");
$(".f3").addClass("hide");
$(".f4").addClass("hide");
$(".f5").addClass("hide");
$(".f6").removeClass("hide");
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta charset="utf-8">
<title>三级联动导航条</title>
<link rel="stylesheet" rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/script2.js"></script>
<link rel="stylesheet" type="text/css" href="css/style2.css"/>
</head>
<body>
<div class="header_bg">
<div class="header">
<div class="nav" id="mainNav">
<ul class="list">
<li>
<button type="button" onclick="A()" class="game_hover">A</button>
<div class="hover_cont hide wlyx A">
<div class="nav_cont">
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Aa()">Aa</button>
</div>
<div class="nav_li_r hide a1">
<a href="#">Aa1</a>┊<a href="#">Aa2</a>┊<a href="#">Aa3</a>┊<a href="#">Aa4</a>┊<a href="#">Aa5</a>┊<a href="#">Aa6</a>┊<a href="#">Aa7</a>┊<a href="#">Aa8</a>┊<a href="#">Aa9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ab()">Ab</button>
</div>
<div class="nav_li_r hide a2">
<a href="#">Ab1</a>┊<a href="#">Ab2</a>┊<a href="#">Ab3</a>┊<a href="#">Ab4</a>┊<a href="#">Ab5</a>┊<a href="#">Ab6</a>┊<a href="#">Ab7</a>┊<a href="#">Ab8</a>┊<a href="#">Ab9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ac()">Ac</button>
</div>
<div class="nav_li_r hide a3">
<a href="#">Ac1</a>┊<a href="#">Ac2</a>┊<a href="#">Ac3</a>┊<a href="#">Ac4</a>┊<a href="#">Ac5</a>┊<a href="#">Ac6</a>┊<a href="#">Ac7</a>┊<a href="#">Ac8</a>┊<a href="#">Ac9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ad()">Ad</button>
</div>
<div class="nav_li_r hide a4">
<a href="#">Ad1</a>┊<a href="#">Ad2</a>┊<a href="#">Ad3</a>┊<a href="#">Ad4</a>┊<a href="#">Ad5</a>┊<a href="#">Ad6</a>┊<a href="#">Ad7</a>┊<a href="#">Ad8</a>┊<a href="#">Ad9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ae()">Ae</button>
</div>
<div class="nav_li_r hide a5">
<a href="#">Ae1</a>┊<a href="#">Ae2</a>┊<a href="#">Ae3</a>┊<a href="#">Ae4</a>┊<a href="#">Ae5</a>┊<a href="#">Ae6</a>┊<a href="#">Ae7</a>┊<a href="#">Ae8</a>┊<a href="#">Ae9</a>
</div>
</div>
<div class="nav_li" style="border: 0;">
<div class="nav_li_l">
<button type="button" onclick="Af()">Af</button>
</div>
<div class="nav_li_r hide a6">
<a href="#">Af1</a>┊<a href="#">Af2</a>┊<a href="#">Af3</a>┊<a href="#">Af4</a>┊<a href="#">Af5</a>┊<a href="#">Af6</a>┊<a href="#">Af7</a>┊<a href="#">Af8</a>┊<a href="#">Af9</a>
</div>
</div>
</div>
</div>
</li>
<li>
<button type="button" onclick="B()" class="game_hover">B</button>
<div class="hover_cont hide wlyx B">
<div class="nav_cont">
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ba()">Ba</button>
</div>
<div class="nav_li_r hide b1">
<a href="#">Ba1</a>┊<a href="#">Ba2</a>┊<a href="#">Ba3</a>┊<a href="#">Ba4</a>┊<a href="#">Ba5</a>┊<a href="#">Ba6</a>┊<a href="#">Ba7</a>┊<a href="#">Ba8</a>┊<a href="#">Ba9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Bb()">Bb</button>
</div>
<div class="nav_li_r hide b2">
<a href="#">Bb1</a>┊<a href="#">Bb2</a>┊<a href="#">Bb3</a>┊<a href="#">Bb4</a>┊<a href="#">Bb5</a>┊<a href="#">Bb6</a>┊<a href="#">Bb7</a>┊<a href="#">Bb8</a>┊<a href="#">Bb9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Bc()">Bc</button>
</div>
<div class="nav_li_r hide b3">
<a href="#">Bc1</a>┊<a href="#">Bc2</a>┊<a href="#">Bc3</a>┊<a href="#">Bc4</a>┊<a href="#">Bc5</a>┊<a href="#">Bc6</a>┊<a href="#">Bc7</a>┊<a href="#">Bc8</a>┊<a href="#">Bc9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Bd()">Bd</button>
</div>
<div class="nav_li_r hide b4">
<a href="#">Bd1</a>┊<a href="#">Bd2</a>┊<a href="#">Bd3</a>┊<a href="#">Bd4</a>┊<a href="#">Bd5</a>┊<a href="#">Bd6</a>┊<a href="#">Bd7</a>┊<a href="#">Bd8</a>┊<a href="#">Bd9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Be()">Be</button>
</div>
<div class="nav_li_r hide b5">
<a href="#">Be1</a>┊<a href="#">Be2</a>┊<a href="#">Be3</a>┊<a href="#">Be4</a>┊<a href="#">Be5</a>┊<a href="#">Be6</a>┊<a href="#">Be7</a>┊<a href="#">Be8</a>┊<a href="#">Be9</a>
</div>
</div>
<div class="nav_li" style="border: 0;">
<div class="nav_li_l">
<button type="button" onclick="Bf()">Bf</button>
</div>
<div class="nav_li_r hide b6">
<a href="#">Bf1</a>┊<a href="#">Bf2</a>┊<a href="#">Bf3</a>┊<a href="#">Bf4</a>┊<a href="#">Bf5</a>┊<a href="#">Bf6</a>┊<a href="#">Bf7</a>┊<a href="#">Bf8</a>┊<a href="#">Bf9</a>
</div>
</div>
</div>
</div>
</li>
<li>
<button type="button" onclick="C()" class="game_hover">C</button>
<div class="hover_cont hide wlyx C">
<div class="nav_cont">
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ca()">Ca</button>
</div>
<div class="nav_li_r hide c1">
<a href="#">Ca1</a>┊<a href="#">Ca2</a>┊<a href="#">Ca3</a>┊<a href="#">Ca4</a>┊<a href="#">Ca5</a>┊<a href="#">Ca6</a>┊<a href="#">Ca7</a>┊<a href="#">Ca8</a>┊<a href="#">Ca9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Cb()">Cb</button>
</div>
<div class="nav_li_r hide c2">
<a href="#">Cb1</a>┊<a href="#">Cb2</a>┊<a href="#">Cb3</a>┊<a href="#">Cb4</a>┊<a href="#">Cb5</a>┊<a href="#">Cb6</a>┊<a href="#">Cb7</a>┊<a href="#">Cb8</a>┊<a href="#">Cb9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Cc()">Cc</button>
</div>
<div class="nav_li_r hide c3">
<a href="#">Cc1</a>┊<a href="#">Cc2</a>┊<a href="#">Cc3</a>┊<a href="#">Cc4</a>┊<a href="#">Cc5</a>┊<a href="#">Cc6</a>┊<a href="#">Cc7</a>┊<a href="#">Cc8</a>┊<a href="#">Cc9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Cd()">Cd</button>
</div>
<div class="nav_li_r hide c4">
<a href="#">Cd1</a>┊<a href="#">Cd2</a>┊<a href="#">Cd3</a>┊<a href="#">Cd4</a>┊<a href="#">Cd5</a>┊<a href="#">Cd6</a>┊<a href="#">Cd7</a>┊<a href="#">Cd8</a>┊<a href="#">Cd9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ce()">Ce</button>
</div>
<div class="nav_li_r hide c5">
<a href="#">Ce1</a>┊<a href="#">Ce2</a>┊<a href="#">Ce3</a>┊<a href="#">Ce4</a>┊<a href="#">Ce5</a>┊<a href="#">Ce6</a>┊<a href="#">Ce7</a>┊<a href="#">Ce8</a>┊<a href="#">Ce9</a>
</div>
</div>
<div class="nav_li" style="border: 0;">
<div class="nav_li_l">
<button type="button" onclick="Cf()">Cf</button>
</div>
<div class="nav_li_r hide c6">
<a href="#">Cf1</a>┊<a href="#">Cf2</a>┊<a href="#">Cf3</a>┊<a href="#">Cf4</a>┊<a href="#">Cf5</a>┊<a href="#">Cf6</a>┊<a href="#">Cf7</a>┊<a href="#">Cf8</a>┊<a href="#">Cf9</a>
</div>
</div>
</div>
</div>
</li>
<li>
<button type="button" onclick="D()" class="game_hover">D</button>
<div class="hover_cont hide kyx D">
<div class="nav_cont">
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Da()">Da</button>
</div>
<div class="nav_li_r hide d1">
<a href="#">Da1</a>┊<a href="#">Da2</a>┊<a href="#">Da3</a>┊<a href="#">Da4</a>┊<a href="#">Da5</a>┊<a href="#">Da6</a>┊<a href="#">Da7</a>┊<a href="#">Da8</a>┊<a href="#">Da9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Db()">Db</button>
</div>
<div class="nav_li_r hide d2">
<a href="#">Db1</a>┊<a href="#">Db2</a>┊<a href="#">Db3</a>┊<a href="#">Db4</a>┊<a href="#">Db5</a>┊<a href="#">Db6</a>┊<a href="#">Db7</a>┊<a href="#">Db8</a>┊<a href="#">Db9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Dc()">Dc</button>
</div>
<div class="nav_li_r hide d3">
<a href="#">Dc1</a>┊<a href="#">Dc2</a>┊<a href="#">Dc3</a>┊<a href="#">Dc4</a>┊<a href="#">Dc5</a>┊<a href="#">Dc6</a>┊<a href="#">Dc7</a>┊<a href="#">Dc8</a>┊<a href="#">Dc9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Dd()">Dd</button>
</div>
<div class="nav_li_r hide d4">
<a href="#">Dd1</a>┊<a href="#">Dd2</a>┊<a href="#">Dd3</a>┊<a href="#">Dd4</a>┊<a href="#">Dd5</a>┊<a href="#">Dd6</a>┊<a href="#">Dd7</a>┊<a href="#">Dd8</a>┊<a href="#">Dd9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="De()">De</button>
</div>
<div class="nav_li_r hide d5">
<a href="#">De1</a>┊<a href="#">De2</a>┊<a href="#">De3</a>┊<a href="#">De4</a>┊<a href="#">De5</a>┊<a href="#">De6</a>┊<a href="#">De7</a>┊<a href="#">De8</a>┊<a href="#">De9</a>
</div>
</div>
<div class="nav_li" style="border: 0;">
<div class="nav_li_l">
<button type="button" onclick="Df()">Df</button>
</div>
<div class="nav_li_r hide d6">
<a href="#">Df1</a>┊<a href="#">Df2</a>┊<a href="#">Df3</a>┊<a href="#">Df4</a>┊<a href="#">Df5</a>┊<a href="#">Df6</a>┊<a href="#">Df7</a>┊<a href="#">Df8</a>┊<a href="#">Df9</a>
</div>
</div>
</div>
</div>
</li>
<li>
<button type="button" onclick="E()" class="game_hover">E</button>
<div class="hover_cont hide kyx E">
<div class="nav_cont">
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ea()">Ea</button>
</div>
<div class="nav_li_r hide e1">
<a href="#">Ea1</a>┊<a href="#">Ea2</a>┊<a href="#">Ea3</a>┊<a href="#">Ea4</a>┊<a href="#">Ea5</a>┊<a href="#">Ea6</a>┊<a href="#">Ea7</a>┊<a href="#">Ea8</a>┊<a href="#">Ea9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Eb()">Eb</button>
</div>
<div class="nav_li_r hide e2">
<a href="#">Eb1</a>┊<a href="#">Eb2</a>┊<a href="#">Eb3</a>┊<a href="#">Eb4</a>┊<a href="#">Eb5</a>┊<a href="#">Eb6</a>┊<a href="#">Eb7</a>┊<a href="#">Eb8</a>┊<a href="#">Eb9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ec()">Ec</button>
</div>
<div class="nav_li_r hide e3">
<a href="#">Ec1</a>┊<a href="#">Ec2</a>┊<a href="#">Ec3</a>┊<a href="#">Ec4</a>┊<a href="#">Ec5</a>┊<a href="#">Ec6</a>┊<a href="#">Ec7</a>┊<a href="#">Ec8</a>┊<a href="#">Ec9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ed()">Ed</button>
</div>
<div class="nav_li_r hide e4">
<a href="#">Ed1</a>┊<a href="#">Ed2</a>┊<a href="#">Ed3</a>┊<a href="#">Ed4</a>┊<a href="#">Ed5</a>┊<a href="#">Ed6</a>┊<a href="#">Ed7</a>┊<a href="#">Ed8</a>┊<a href="#">Ed9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Ee()">Ee</button>
</div>
<div class="nav_li_r hide e5">
<a href="#">Ee1</a>┊<a href="#">Ee2</a>┊<a href="#">Ee3</a>┊<a href="#">Ee4</a>┊<a href="#">Ee5</a>┊<a href="#">Ee6</a>┊<a href="#">Ee7</a>┊<a href="#">Ee8</a>┊<a href="#">Ee9</a>
</div>
</div>
<div class="nav_li" style="border: 0;">
<div class="nav_li_l">
<button type="button" onclick="Ef()">Ef</button>
</div>
<div class="nav_li_r hide e6">
<a href="#">Ef1</a>┊<a href="#">Ef2</a>┊<a href="#">Ef3</a>┊<a href="#">Ef4</a>┊<a href="#">Ef5</a>┊<a href="#">Ef6</a>┊<a href="#">Ef7</a>┊<a href="#">Ef8</a>┊<a href="#">Ef9</a>
</div>
</div>
</div>
</div>
</li>
<li>
<button type="button" onclick="F()" class="game_hover">F</button>
<div class="hover_cont hide kyx F">
<div class="nav_cont">
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Fa()">Fa</button>
</div>
<div class="nav_li_r hide f1">
<a href="#">Fa1</a>┊<a href="#">Fa2</a>┊<a href="#">Fa3</a>┊<a href="#">Fa4</a>┊<a href="#">Fa5</a>┊<a href="#">Fa6</a>┊<a href="#">Fa7</a>┊<a href="#">Fa8</a>┊<a href="#">F9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Fb()">Fb</button>
</div>
<div class="nav_li_r hide f2">
<a href="#">Fb1</a>┊<a href="#">Fb2</a>┊<a href="#">Fb3</a>┊<a href="#">Fb4</a>┊<a href="#">Fb5</a>┊<a href="#">Fb6</a>┊<a href="#">Fb7</a>┊<a href="#">Fb8</a>┊<a href="#">Fb9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Fc()">Fc</button>
</div>
<div class="nav_li_r hide f3">
<a href="#">Fc1</a>┊<a href="#">Fc2</a>┊<a href="#">Fc3</a>┊<a href="#">Fc4</a>┊<a href="#">Fc5</a>┊<a href="#">Fc6</a>┊<a href="#">Fc7</a>┊<a href="#">Fc8</a>┊<a href="#">Fc9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Fd()">Fd</button>
</div>
<div class="nav_li_r hide f4">
<a href="#">Fd1</a>┊<a href="#">Fd2</a>┊<a href="#">Fd3</a>┊<a href="#">Fd4</a>┊<a href="#">Fd5</a>┊<a href="#">Fd6</a>┊<a href="#">Fd7</a>┊<a href="#">Fd8</a>┊<a href="#">Fd9</a>
</div>
</div>
<div class="nav_li">
<div class="nav_li_l">
<button type="button" onclick="Fe()">Fe</button>
</div>
<div class="nav_li_r hide f5">
<a href="#">Fe1</a>┊<a href="#">Fe2</a>┊<a href="#">Fe3</a>┊<a href="#">Fe4</a>┊<a href="#">Fe5</a>┊<a href="#">Fe6</a>┊<a href="#">Fe7</a>┊<a href="#">Fe8</a>┊<a href="#">Fe9</a>
</div>
</div>
<div class="nav_li" style="border: 0;">
<div class="nav_li_l">
<button type="button" onclick="Ff()">Ff</button>
</div>
<div class="nav_li_r hide f6">
<a href="#">Ff1</a>┊<a href="#">Ff2</a>┊<a href="#">Ff3</a>┊<a href="#">Ff4</a>┊<a href="#">Ff5</a>┊<a href="#">Ff6</a>┊<a href="#">Ff7</a>┊<a href="#">Ff8</a>┊<a href="#">Ff9</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
*{margin:0;padding:0;}
body{font:14px "寰蒋闆呴粦", arial, serif;color:#333;}
a,a:link,a:visited{color:#039;}
img{border:0;}
.header_bg{width:100%;height:128px;background:no-repeat center top;}
.header{margin:0 auto 0 auto;width:988px;height:128px;background:no-repeat center top;}
.nav{position:relative;left:4px;top:92px;width:950px;height:35px;background:#333;border-top:1px solid #444;}
.nav .list{list-style-type:none;margin-left:15px;}
.nav .list li{float:left;position:relative;height:35px;line-height:26px;}
.nav .list li .game_hover{float:left;display:block;margin-top:5px;height:30px; width:150px;padding:0 10px 0 10px;color:#ccc;font-weight:bold;text-decoration:none;}
.nav .list li .game_hover:hover{background-color:#fff;color:#575757;margin-top:4px;padding:0 9px 0 9px;border:1px solid #666;border-bottom:0;}
.hover_cont{position:absolute;width:auto;height:auto; top:35px;border:1px solid #666;border-top:0;border-bottom-width:2px;background:#fff;z-index:1000;}
.hover_cont .nav_cont{padding:15px;padding-bottom:0;}
.hover_cont .nav_li{display:inline-block;width:100%;height:100%;*height:auto;*margin-top:7px;padding-bottom:5px;*padding-bottom:12px;border-bottom:1px dashed #ccc;}
.hover_cont .nav_li_l{float:left;width:80px;color:#f60;font-weight:bold;}
.hover_cont .nav_li_r{float:left;color:#999;font-family:"瀹嬩綋";font-size:10px;line-height:26px;}
.hover_cont .nav_li_r a{padding:0 1px 0 1px;color:#666;font-size:12px;text-decoration:none;}
.hover_cont .nav_li_r a:hover{color:red;}
.hover_cont .nav_li_r a.orange{color:#f60;}
.nav .list .wlyx{width:400px;left:0;}
.nav .list .kyx{width:400px;right:0;}
.content{margin:15px auto 0 auto;width:980px;height:500px;background:#ccc;}
.hide{display:none;}