menu desplegable

(Para mejor vista clik aqui)

Codigo:

Pegar esto en "sin style tag":

<style type="text/css"> <br /> <br /> .pro_linedrop { <br /> height:35px; <br /> width:900px; <br /> background:url(http://pixelea.com/s/e8239eafdc.gif); <br /> position:relative; <br /> font-family:arial, verdana, sans-serif; <br /> font-size:11px; <br /> z-index:500;} <br /> .pro_linedrop .select { <br /> margin:0; <br /> padding:0; <br /> list-style:none; <br /> white-space:nowrap;} <br /> .pro_linedrop li { <br /> float:left; <br /> background:url(http://pixelea.com/s/78302797f1.gif);} <br /> .pro_linedrop li.lrt { <br /> float:right; <br /> background:url(http://pixelea.com/s/2884b0d889.gif);} <br /> .pro_linedrop .select a { <br /> display:block; height:35px; <br /> float:left; <br /> background: url(http://pixelea.com/s/e8239eafdc.gif); <br /> padding:0 0 0 15px; <br /> text-decoration:none; <br /> line-height:33px; <br /> white-space:nowrap; <br /> color:#fc0;} <br /> .pro_linedrop .select li.lrt a {color:#0ff;} <br /> .pro_linedrop .select a b { <br /> display:block; <br /> padding:0 30px 0 15px; <br /> background:url(http://pixelea.com/s/e8239eafdc.gif) right top;} <br /> .pro_linedrop .select li.line a b { <br /> background:url(http://pixelea.com/s/f40853e90c.gif) right top;} <br /> .pro_linedrop .select a:hover, <br /> .pro_linedrop .select li:hover a { <br /> background: url(http://pixelea.com/s/78302797f1.gif); <br /> padding:0 0 0 15px; <br /> cursor:pointer; color:#fff;} <br /> .pro_linedrop .select li.lrt a:hover, <br /> .pro_linedrop .select li.lrt:hover a { <br /> background: url(http://pixelea.com/s/2884b0d889.gif); } <br /> .pro_linedrop .select a:hover b, <br /> .pro_linedrop .select li:hover a b { <br /> display:block; <br /> padding:0 30px 0 15px; <br /> background:url(http://pixelea.com/s/78302797f1.gif) right top; <br /> cursor:pointer;} <br /> .pro_linedrop .select li.line a:hover b, <br /> .pro_linedrop .select li.line:hover a b { <br /> background:url(http://pixelea.com/s/78302797f1.gif) right top; } <br /> .pro_linedrop .select li.lrt a:hover b, <br /> .pro_linedrop .select li.lrt:hover a b { <br /> background:url(http://pixelea.com/s/2884b0d889.gif) right top; } <br /> .pro_linedrop .select li.lrt a:hover b.arrow, <br /> .pro_linedrop .select li.lrt:hover a b.arrow { <br /> background:url(http://pixelea.com/s/5b5e01fee7.gif) right top; } <br /> .pro_linedrop .sub {display:none;} <br /> .pro_linedrop ul ul {display:none;} <br /> .pro_linedrop table { <br /> border-collapse:collapse; <br /> margin:-1px; font-size:1em; width:0; height:0;} <br /> .pro_linedrop .sub {margin:0; padding:0;list-style:none;} <br /> .pro_linedrop .sub li {background:transparent;} <br /> .pro_linedrop .select :hover .sub { <br /> height:25px; display:block; <br /> position:absolute; float:left; <br /> width:900px; top:35px; left:0; <br /> text-align:center; <br /> background:#fff url(http://pixelea.com/s/d5a2d4e79b.gif); <br /> border:1px solid #aaa;} <br /> .pro_linedrop .select :hover .rt li {float:right;} <br /> .pro_linedrop .select :hover .sub li a <br /> {display:block; height:25px; line-height:22px; float:left; background:transparent none; <br /> padding:0 16px; margin:0; white-space:nowrap; color:#333;font-size:10px;} <br /> .pro_linedrop .select :hover .sub li.subline a {color:#c00;} <br /> .pro_linedrop .select :hover .sub li a:hover, <br /> .pro_linedrop .select :hover .sub li:hover <br /> {color:#000; line-height:20px; position:relative; <br /> background:#fff url(http://pixelea.com/s/d5a2d4e79b.gif) left bottom;} <br /> </style><br />

Pegar esto donde quieran que aparezca el menu (Modifiquen donde dice "URL LINK'S" Y "Nombre del link's" ):

<div class="pro_linedrop"> <br /> <ul class="select"> <br /> <li><a href="URL LINK'S"><b>Nombre link's</b></a></li> <br /> <li class="line"><a href="URL LINK'S"><b>Nombre link's</b><!--[if IE 7]><!--></a><!--<![endif]--> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br />    <ul class="sub"> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />    </ul> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <br /> </li> <br /> <br /> <li class="line"><a href="URL LINK'S"><b>Nombre link's</b><!--[if IE 7]><!--></a><!--<![endif]--> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br />    <ul class="sub"> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />    </ul> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <br /> </li> <br /> <li class="lrt"><a href="URL LINK'S"><b>Nombre link's</b></a></li> <br /> <li class="line lrt"><a href="URL LINK'S"><b class="arrow">Nombre link's</b><!--[if IE 7]><!--></a><!--<![endif]--> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br />    <ul class="sub rt"> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />    </ul> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <br /> </li> <br /> <li class="line lrt"><a href="URL LINK'S"><b class="arrow">Nombre link's</b><!--[if IE 7]><!--></a><!--<![endif]--> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br />    <ul class="sub rt"> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />       <li><a href="URL LINK'S">Nombre link's</a></li> <br />     <br />    </ul> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <br /> </li> <br /> </ul> <br /> </div>

</u>  <link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jquerycssmenu.css" /> <br /> <br /> <!--[if lte IE 7]> <br /> <style type="text/css"> <br /> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ <br /> </style> <br /> <![endif]--> <br /> <br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <br /> <script type="text/javascript" src="http://img10.xooimage.com/files/1/8/a/jquerycssmenu-b581fe.js"></script> <br />  <br /><br /></p>

Pegar esto donde quieran que aparezca el menu(modifiquen los # por las URL y los nombres):

<div id="myjquerymenu" class="jquerycssmenu"> <ul> <li><a href="#" _fcksavedurl="#">Item 1</a></li> <li><a href="#" _fcksavedurl="#">Item 2</a></li> <li><a href="#" _fcksavedurl="#">Folder 1</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 1.1</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 1.2</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 1.3</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">Item 3</a></li> <li><a href="#" _fcksavedurl="#">Folder 2</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 2.1</a></li> <li><a href="#" _fcksavedurl="#">Folder 2.1</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.1</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.2</a></li> <li><a href="#" _fcksavedurl="#">Folder 3.1.1</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 3.1.1.1</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 3.1.1.2</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 3.1.1.3</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 3.1.1.4</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#" _fcksavedurl="#">Item 4</a></li> </ul> <br style="clear: left" /> </div>