Dedecms calls the topic navigation and generates a level-2 drop-down menu

The navigation menu generated by Dedecms comes with tags, which is easy to understand.

The default tag generated by Zhimeng is as follows:

The code is as follows:	Copy code
{Dede: channel type = 'top' row = '10 & prime; currentstyle = "<li class = 'hover '> <a href = '~ Typelink ~ '~ Rel ~> <Span> ~ Typename ~ </Span> </a> </li> "} <Li> <a href = '[field: typeurl/]' [field: rel/]> <span> [field: typename/] </span> </a> </li> {/Dede: channel}

This does not contain a level-2 menu. Here is a series of code. The code of the level-2 menu with a simple navigation menu and a drop-down effect is as follows:

CSS code:

The code is as follows:

Copy code

. Zb {list-style: none; text-align: left; position: absolute; z-index: 99999; margin: 0px; padding: 0px! Important; top: 37px; left: 0px; background: #009900; width: 130px; display: none} . Zb li {text-align: left; line-height: 30px! Important; height: 30px; width: 130px ;} . R {margin-left: 10px; font-weight: normal}     . Nav_cc li {float: left; line-height: 37px; font-weight: bold; color: # fff; font-family: ;}   . Nav_cc ul {padding-left: 20px}   . Nav_cc li a: link,. nav_cc li a: visited {font-size: 14px; color: # fff; margin: auto 15px}   . Nav_cc li a: hover {color: # f00}   . Hover {color: # f00}

Html with the dream tag:

The code is as follows:

Copy code

<SCRIPT src = "jquery. min. js"> </SCRIPT> // introduce the js used in the drop-down menu. <Div class = "nav_cc" style = "overflow: inherit"> <Ul id = "shanmao"> <Li> <a href = '{dede: global. Pai_cmsurl/}/'> <span> Home Page </span> </a> | </li> {Dede: channelartlist row = 8} <Li style = "position: relative;"> <a href = "{dede: field name = 'typeurl'/}"> {dede: field name = 'typename'/} </a> | <Ul class = "zb"> {Dede: SQL = 'select * from dede_arctype where reid = ~ Id ~ Order by id limit 0, 17 '} <Li> <a href = '/plus/list. php? Tid = [field: id/] 'style = "font-weight: normal"> [field: typename/] </a> </li> {/Dede: SQL} </Ul> </li> {/Dede: channelartlist} <Li> <a href = "{dede: global. Short_cmsurl/}/plus/guestbook. php"> Technical Q & a </a> | </li> </Ul> </Div>

Finally, the code is executed from the drop-down menu:

The code is as follows:	Copy code
<Script> $ (Document). ready (function (){ $ ("# Shanmao li"). hover (function (){ $ (This). children (". zb"). slideDown (1000 ); }, Function (){ $ (This). children (". zb"). slideUp (0 ); }); }); </Script>