二级菜单嵌套三级

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0020)http://www.nhzj.org/ -->
<html xmlns="http://www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Cmeta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>农禾之家_农禾之家官网</title>

<link href="./农禾之家_农禾之家官网_files/mystyles.css" rel="stylesheet" type="text/css">


<script type="text/javascript">
<!--
var timeout         = 500;
var closetimer  = 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{ 
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
// -->
</script>

</head>
<body>


<!--新导航代码开始--> 
<div id="sddm">
<ul>
<li><a href="http://www.nhzj.org/index.php" onmouseover="mopen(&#39;m1&#39;)" onmouseout="mclosetime()"><span>首页</span></a>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="http://www.nhzj.org/list.php?catid=86" onmouseover="mopen(&#39;m2&#39;)" onmouseout="mclosetime()"><span>关于我们</span></a>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="javascript:void(0)" onmouseover="mopen(&#39;m3&#39;)" onmouseout="mclosetime()"><span>农禾项目</span></a>
           <!--二级栏目-->
           <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" style="z-index: 9999; visibility: hidden;">
                     
                    <a href="http://www.nhzj.org/list.php?catid=95">片区建设</a>
                                    
                    <a href="http://www.nhzj.org/list.php?catid=96">社区建设</a>
                                    
                    <a href="http://www.nhzj.org/list.php?catid=97">职业团队建设支持</a>
           </div>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="javascript:void(0)" onmouseover="mopen(&#39;m4&#39;)" onmouseout="mclosetime()"><span>农禾培训</span></a>
 <!--二级栏目-->
                 <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" style="z-index: 9999; visibility: hidden;">
                     
                    <a href="http://www.nhzj.org/list.php?catid=91">农合CEO</a>
                                     
                    <a href="http://www.nhzj.org/list.php?catid=98">乡村社区工作者</a>
                                      </div>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="javascript:void(0)" onmouseover="mopen(&#39;m5&#39;)" onmouseout="mclosetime()"><span>出版</span></a>
 <!--二级栏目-->
               <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" style="z-index: 9999; visibility: hidden;">
                     
                    <a href="http://www.nhzj.org/list.php?catid=99">综合农协期刊</a>
                                     
                    <a href="http://www.nhzj.org/list.php?catid=100">综合农协系列丛书</a>
                                  </div>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="javascript:void(0)" onmouseover="mopen(&#39;m6&#39;)" onmouseout="mclosetime()"><span>农协研究</span></a>
<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" style="z-index: 9999; visibility: hidden;">
                   <!--二级栏目-->
                     
                    <a href="http://www.nhzj.org/list.php?catid=80">农协理论</a>
                                     
                    <a href="http://www.nhzj.org/list.php?catid=81">农协实践</a>
                    </div>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="javascript:void(0)" onmouseover="mopen(&#39;m7&#39;)" onmouseout="mclosetime()"><span>政策法规</span></a>
<div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" style="z-index:9999">
                 <!--二级导航-->
                 <a href="http://www.nhzj.org/list.php?catid=76" onmouseover="aaaa()" onmouseout="bbbb()">政策法规汇总</a>
    <ul style="position:absolute; right:-47px; top:0px; visibility: hidden;  border-radius:4px; z-index:9999;" id="zc_list" onmouseout="bbbb()">
        <li style="clear:both; background:#99FF99; line-height:20px;" onmouseover="aaaa()" onmouseout="bbbb()"><a href="http://www.nhzj.org/list.php?catid=89">中央</a></li>
        <li style="clear:both; background:#99FF99; line-height:20px;" onmouseover="aaaa()" onmouseout="bbbb()"><a href="http://www.nhzj.org/list.php?catid=90">地方</a></li>
    </ul>
   <a href="http://www.nhzj.org/list.php?catid=77">政策解读</a>
</div>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="javascript:void(0)" onmouseover="mopen(&#39;m8&#39;)" onmouseout="mclosetime()" style="z-index:9999"><span>专家库</span></a>
 <!--二级栏目-->
                <div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" style="z-index:9999">
                     
                    <a href="http://www.nhzj.org/list.php?catid=83">农技专家</a>
                                     
                    <a href="http://www.nhzj.org/list.php?catid=84">学术专家</a>
               </div>
</li>
<li><img src="./农禾之家_农禾之家官网_files/nh08.jpg" width="2" height="16" border="0"></li>
<li><a href="http://lianmeng.nhzj.org/" onmouseover="mopen(&#39;m9&#39;)" onmouseout="mclosetime()" target="_blank"><span>农禾之家联盟</span></a>
</li>
<li>
<form name="search" style="margin-left: 20px;" action="http://www.nhzj.org/search/" target="_blank">
<input name="q" type="text" class="input_blur"> <input type="submit" name="s" value="搜索" class="button_style">
</form>
</li>
</ul>
</div>
<script>
function aaaa(){
document.getElementById("zc_list").style.visibility = "visible";
}
function bbbb(){
document.getElementById("zc_list").style.visibility = "hidden";
}
</script>

<!-- 新导航结束 -->  
</body></html>

 

@charset "utf-8";  /* CSS Document */

body {

 font-size: 12px;

 color: #000;

 text-align: center;

 background: #fff;

 font-family: "瀹嬩綋";

}

* {

 margin: 0;

 padding: 0;

}

div,ul,li,ol,dt,dd,dl,p,span {

 overflow: hidden;

 margin: 0;

 padding: 0;

}

ul,li {

 list-style: none;

}

img {

 border: none

}

a {

 text-decoration: none;

 color: #000;

}

a:hover {

 text-decoration: underline

}

.png {

 background-image: expression(this.runtimeStyle.backgroundImage =   "none",

  this.runtimeStyle.filter = 

  "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src

  +   "', sizingMethod='image')", this.src =   "images/1.gif");

}

#sddm

{ margin: 0 auto;

 padding: 0;

 z-index: 30;
 background:url(nh06.jpg) no-repeat; 

  990px;

 height:40px;

 line-height:40px;

}

#sddm ul{ padding-left:10px;}
#sddm li

{ margin: 0;

 padding: 0;

 list-style: none;

 float: left;

 font: bold 12px arial;

 line-height:40px;

}

#sddm ul li img{ margin-left:6px; margin-right:6px; margin-top:12px;}

#sddm li a

{ display: block;

 margin: 0 1px 0 0;

 padding: 0px 0 0px 10px;

 color: #FFF;

 text-align: center;
 

 text-decoration: none}

#sddm li a span{display:block;padding: 0px 10px 0px 0;

}

#sddm li a:hover{
 background:url(nav-left_y.jpg) no-repeat scroll left bottom transparent;
 color:#1e8904;

 text-decoration:none;

}

#sddm li a:hover span{


background:url(nav_right_y.png) no-repeat scroll right bottom transparent;
}

#sddm div

{ position: absolute;

 visibility: hidden;

 margin: 0;

 padding: 0;

 background:#99FF99;

 border: 1px solid #5bb812;

 border-radius: 4px 4px 4px 4px;

}

 #sddm div a

 { position: relative;

  display: block;

  margin: 0;

  padding: 5px 10px;

   auto;

  white-space: nowrap;

  text-align: left;

  text-decoration: none;

  background: #49ad0d;

  color: #FFF;

  font: 12px arial;

  font-weight:bold;

}

 #sddm div a:hover

 { background: #cbecb7;

  color: #218900;}
 #sddm li div{
  overflow: visible;
 }

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaoleidiv/p/3205310.html