Introducir en el contenido de un gadget hatml/java, lo siguiente:
<style
type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5%
'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida
Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu
ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenu
li{float:left;padding:0}#cssmenu
li a{background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5j5NNEDjDzpb83TdzBT84K9qGIod4Z3S-7Cl8_jrzGjrhV8dbcXNNvwgPZeOrFduRgpFK3JZz6H6ZmzXIh6x4fWL3X6EuM2b4YaLOEdpt2HGaJ5NYE-_SSlx8Z1I419qWhU8QuQw5Gdpp/s1600/seperator.gif')
bottom right
no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0
25px;text-align:center;text-decoration:none}#cssmenu > ul > li >
a{color:#ccc}#cssmenu ul ul
a{color:#ccc}#cssmenu
li > a:hover,#cssmenu ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0D3u6fCz_Ss7NSDVUqsD6bjh6_j5xoAa-d942yx9W3wVfKgOz-SHFzQZyYM6QAz7Xmy3cD-3sRCqbdmMZbv-EY-0REHYQMQs3WDNG1VhQzssRvFh7w2jpg62LMwpHwJUEYjyElqt6KDUk/s1600/hover.png')
bottom
center no-repeat;color:#FFF;text-decoration:none}#cssmenu li
ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu
li:hover ul{display:block}#cssmenu li li{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXenyjHZNv8u7X4CE-x4zPfENRkE1_g_LqrJlSOsTyw2a5QrDdXiY6EY8Zskmd3PG9AG2NS3Km0R3Epb2vAPoTF-JAvWQ4P56k9dkX0lc97XrsNic94jg62wBCYQJKxQqX2x66TfTZpEuF/s1600/sub_sep.gif')
bottom left
no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenu
li:hover li a{background:none}#cssmenu li ul
a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0
10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover >
a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VF09gy54uRhJnKHBrpB1T17L1yZDuVQy2pkRjZhLSiW4-bhW_mTVR5SPhtlrBWHiu7Z0pPCQgfFy9aPyF5RtJsTwgdVsT0DQCAyW92DpuTFWT3EbQZIfPHbUNePfvu91jhrNkOTf0db_/s1600/hover_sub.png')
center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu
p{clear:left}</style><a href="http://24work.blogspot.com/"
rel="dofollow" target="_blank" title="Drop Down
Menus"><img src="https://bitly.com/24workpng1"
alt="Drop Down Menus" border="0" style="position:
fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a
href="http://24work.blogspot.com/" rel="dofollow"
target="_blank" title="CSS Drop Down Menu"><img
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu"
border="0" style="position: fixed; bottom: 10%; right: 0%;"
/></a><a href="http://24work.blogspot.com/"
rel="dofollow" target="_blank" title="Pure CSS
Dropdown Menu"><img src="https://bitly.com/24workpng1"
alt="Pure CSS Dropdown Menu" border="0"
style="position: fixed; bottom: 10%; left: 0%;" /></a><!--
Dont edit this CSS Drop Down Menu code or it will not work -->
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a
href="#"><span>Products</span></a>
<ul>
<li><a
href="#"><span>Widgets</span></a></li>
<li><a
href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
index.html à ahí hay que
poner el url de la página a la que se quiere ir
Y allí buscar por ejemplo "Home", y etc., y
reemplazarla por la palabra que quieras, y las partes que tengan # debes
reemplazarlo por tu URL.
Inicio final
<div
id="cssmenu">
<ul>
<li
class="active"><a href="index.html"><span>Menu1</span></a></li>
<li
class="has-sub"><a href="#"><span>Menu2</span></a>
<ul>
<li><a href="#"><span>Submenu21</span></a></li>
<li><a href="#"><span>Submenu22</span></a></li>
<li class="last"><a href="#"><span>Submenu23</span></a></li>
</ul>
</li>
<li
class="has-sub"><a href="#"><span>Menu3</span></a>
<ul>
<li><a href="#"><span>Submenu31</span></a></li> YYY
<li class="last"><a href="#"><span>Submenu32</span></a></li>
</ul>
</li>
<li
class="last"><a href="#"><span>Menu4</span></a></li> XXX
</ul>
</div>
DESCRIPCION MENU COMPLETO
Para añadir una pestaña
nueva copiar la línea XXX
(pero sin las X)
Para añadir submenús
copiar la línea YYY
(pero sin las Y)
OTRO MENÚ:
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@charset 'UTF-8';/* Base Styles */#cssmenu > ul,#cssmenu > ul li,#cssmenu > ul ul{list-style:none;margin:0;padding:0}#cssmenu > ul{position:relative;z-index:597;float:left}#cssmenu > ul li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;padding:10px}#cssmenu > ul li.hover,#cssmenu > ul li:hover{z-index:599;cursor:default}#cssmenu > ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598}#cssmenu > ul ul li{float:none}#cssmenu > ul li:hover > ul{visibility:visible}/* Align last drop down RTL *//* Theme Styles */#cssmenu > ul a:link{text-decoration:none}#cssmenu > ul a:active{color:#ffa500}#cssmenu li{padding:0;color:#000}#cssmenu{font-family:'Lato',sans-serif;width:auto;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background:#1b9bff;font-size:13px;-moz-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);box-shadow:inset 0 2px 2px rgba(255,255,255,0.3)}#cssmenu > ul{padding:0 5px;-moz-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:block;float:none;zoom:1}#cssmenu > ul:before{content:'';display:block}#cssmenu > ul:after{content:'';display:table;clear:both}#cssmenu > ul > li{padding:8px 5px}#cssmenu > ul > li > a,#cssmenu > ul > li > a:link,#cssmenu > ul > li > a:visited{text-shadow:0 -1px 1px #004881;color:#fff;padding:7px 20px;display:block;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}#cssmenu > ul > li > a:hover,#cssmenu > ul > li:hover > a{background-color:#0082e7}#cssmenu li li a{color:#8b8b8b;font-size:13px}#cssmenu li li a:hover{color:#5c5c5c;border-color:#5c5c5c}#cssmenu ul ul{margin:0 10px;padding:0 10px;float:none;background:#efefef;border:2px solid #1b9bff;border-top:none;right:0;left:0;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 2px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.2);box-shadow:0 2px 3px rgba(0,0,0,0.2)}#cssmenu ul > li > ul > li{margin:0 10px 0 0;position:relative;padding:0;float:left}#cssmenu ul > li > ul > li > a{padding:10px 20px 10px 10px;display:block}#cssmenu ul > li > ul > li.has-sub > a:before{content:'';position:absolute;top:18px;right:6px;border:5px solid transparent;border-top:5px solid #8b8b8b}#cssmenu ul > li > ul > li.has-sub > a:hover:before{border-top:5px solid #5c5c5c}#cssmenu ul ul ul{width:200px;top:100%;border:2px solid #1b9bff}#cssmenu ul ul ul li{float:none}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
No hay comentarios:
Publicar un comentario