"Effects" navigation drop-down menu (Level two three)

The Navigation drop-down menu, respectively, is written in level two and level three. In fact, the most important drop-down menu is to write a good structure, which layer is which layer, to be clear, do know. When CSS is positioned, it is important to add absolute absolute positioning to the hidden drop-down menu, but its parent does not have to be relative. JS, simple, a hover () dozen all over the world. Animation with the slidedown,slideup,fadein,fadeout, of course, can be replaced by other effects, animation before adding a stop () is to fast multiple sliding, will not keep flashing ah.

HTML :

<ul class= "NAV" >

<li>

</li>

<li>

<div class= "Down" >

<a href= "" > Company Profile </a>

<a href= "" > Utilities </a>

</div>

</li>

<li class= "Nav_this" >

<div class= "Down" >

<a href= "" > Product 1</a>

<a href= "" > Product 2</a>

<a href= "" > Product 3</a>

<a href= "" > Product 4</a>

</div>

</li>

<li>

<div class= "Down" >

<a href= "" > Project case </a>

<a href= "" > Solutions </a>

<a href= "" > Industry requirements </a>

</div>

</li>

<li>

</li>

</ul>

<br><br><br><br><br><br><br><br>

<ul class= "Nav_2" >

<li>

</li>

<li>

<div class= "Down_2" >

<dl>

<dt><a href= "" > Two level navigation 1</a></dt>

<dd>

<a href= "" > Three level navigation 11</a>

<a href= "" > Three level navigation 12</a>

<a href= "" > Three level navigation 13</a>

<a href= "" > Three level navigation 14</a>

</dd>

</dl>

<dl>

<dt><a href= "" > Two level navigation 2</a></dt>

<dd>

<a href= "" > Three level navigation 21</a>

<a href= "" > Three level navigation 22</a>

</dd>

</dl>

</div>

</li>

<li class= "Nav_this" >

<div class= "Down_2" >

<dl>

<dt><a href= "" > Two level navigation 1</a></dt>

<dd>

<a href= "" > Three level navigation 11</a>

</dd>

</dl>

<dl>

<dt><a href= "" > Two level navigation 2</a></dt>

<dd>

<a href= "" > Three level navigation 21</a>

</dd>

</dl>

<dl>

<dt><a href= "" > Two level navigation 3</a></dt>

<dd>

<a href= "" > Three level navigation 31</a>

<a href= "" > Three level navigation 32</a>

</dd>

</dl>

</div>

</li>

<li>

<div class= "Down_2" >

<dl>

<dt><a href= "" > Two level navigation 1</a></dt>

<dd>

<a href= "" > Three level navigation 11</a>

<a href= "" > Three level navigation 12</a>

<a href= "" > Three level navigation 13</a>

<a href= "" > Three level navigation 14</a>

<a href= "" > Three level navigation 15</a>

<a href= "" > Three level navigation 16</a>

</dd>

</dl>

<dl>

<dt><a href= "" > Two level navigation 2</a></dt>

<dd>

<a href= "" > Three level navigation 21</a>

<a href= "" > Three level navigation 22</a>

</dd>

</dl>

</div>

</li>

<li>

</li>

</ul>

CSS :

ul,h2,dl,dt,dd{padding:0; margin:0;}

ul{List-style:none;}

h1{text-align:center; font-weight:normal;}

h2{Font-weight:normal;}

a:link{color: #333; text-decoration:none;}

a:visited{color: #333; text-decoration:none;}

a:hover{color: #3d6cd8; text-decoration:underline;}

a:active{color: #3d6cd8; text-decoration:underline;}

/* Level Two */

. nav{width:755px; margin:0 auto; border:1px solid #dedede; border-radius:5px; overflow:hidden;}

. Nav li{width:151px; float:left; text-align:center;}

. Nav Li h2{width:150px; height:48px; line-height:48px; border-right:1px solid #dedede background: #f9f9f9; font-size : 16px;}

. Nav li H2 a{display:block; text-decoration:none;}

. Nav Li H2 a:hover,.nav nav_this H2 A,.nav li nav_this_2 a{background: #e9e9e9;}

. down{Display:none; width:110px; padding:10px 20px; position:absolute; margin-left:-1px; border:1px solid #dedede; Background: #f9f9f9; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}

. Down a{display:block; height:36px; line-height:36px; border-bottom:1px solid #e4e4e4; font-size:14px;}

. Nav li:last-child h2{Border:none;}

. Down a:last-child{Border:none;}

/* Level Three */

. nav_2{width:755px; margin:0 auto; overflow:hidden;}

. nav_2 li{width:150px; float:left; text-align:center; margin-right:1px;}

. nav_2 Li h2{width:150px; height:36px; line-height:36px; background: #3d6cd8; font-size:16px;}

. nav_2 Li H2 a{display:block; text-decoration:none; color: #fff;}

. nav_2 li H2 a:hover,.nav_2. nav_this H2 a,.nav_2 li. nav_this_2 a{background: #204db3;}

. down_2{position:absolute; display:none;}

. down_2 a{Display:block;}

. down_2 dt{width:150px; height:36px; line-height:36px; background: #c4c5c7; margin-top:1px;}

. down_2 dd{Display:none; position:absolute; width:150px; left:150px; margin-top:-37px;}

. down_2 dd a{height:36px; line-height:36px; background: #ddd; margin:1px;}

JS :

$ (document). Ready (function () {

$ (". Nav li"). Hover (

function () {

$ (this). Children (". Down"). Stop (True,true). Slidedown ("fast");

$ (this). Find ("H2"). AddClass ("nav_this_2");

},

function () {

$ (this). Children (". Down"). Stop (True,true). Slideup ("fast");

$ (this). Find ("H2"). Removeclass ("nav_this_2");

}

);

$ (". Nav_2 li"). Hover (

function () {

$ (this). Children (". Down_2"). Stop (True,true). Slidedown ("fast");

$ (this). Find ("H2"). AddClass ("nav_this_2");

},

function () {

$ (this). Children (". Down_2"). Stop (True,true). Slideup ("fast");

$ (this). Find ("H2"). Removeclass ("nav_this_2");

}

);

$ (". Nav_2 DL"). Hover (

function () {

$ (this). Children ("DD"). Stop (True,true). FadeIn ();

},

function () {

$ (this). Children ("DD"). Stop (True,true). FadeOut ();

}

);

});

Effect preview: http://www.gbtags.com/gb/rtreplayerpreview-standalone/2846.htm

SOURCE Download: http://pan.baidu.com/s/1i49q5hz

"Effects" navigation drop-down menu (Level two three)