Crear menu desplegable y barra de busqueda para blogger con HTML,Css y javascript

Crear menu desplegable y barra de busqueda para blogger


Bienvenidos a este nuevo corto tutorial para crear un menu desplegable con CSS ,javascript y HTML


Empezemos:


-Debes entrar a blogger >"nombre de tu blog" >Diseños > Nuevo gadget > y buscas HTML/JAVASCRIPT> pegas el siguiente codigo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){     
mainmenu();
});
</script>


<style type="text/css">


#menu a, #menu li, #menu li li{
background-color: #transparent;
}


#menu a:hover, #menu li:hover, #menu li li:hover{
background-color: transparent;
text-decoration: transparent;
}




#nav{
padding: 0;
list-style-type:none;
list-style-position:outside;
overflow: visible;
}
#nav a{
display: block;
overflow: visible;
border: none 0px;
}


#menu{
height: 50px;
border: none 0px;
}


#menu ul {
margin: 0;
list-style: none;
float: left;
}


#menu li.parent {
position: relative;
margin-left: 5px;
display: block;
float: left;
z-index: 3;
width: auto;
list-style: none;
border: none 0px;
}


#menu li {
position: relative;
margin: 0;
z-index: 3;
width: auto;
border: none 0px;
}


#nav ul {
position: absolute;
top: 26px;
left 0px;
z-index: 33;
width: 150px;
visibility: hidden;
border: none 0px;
overflow: visible;
list-style-type:none;
}


#nav ul ul
{
left: 148px;
top: 0px;
width: 150px;
border: none 0px;
overflow: visible;
}


.ul-child li a{
margin: 0px;
padding:0;
z-index: 2;
position: relative;
display: block;
width: 100%;
border: none 0px;
}


.ul-child li{
margin: 0px;
padding: 0px;
border: none 0px;
}


#menu li a{
text-decoration: none;
border: none 0px;
padding: 5px 10px;
}


#menu li.list{
border: none 0px;
width: 150px;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}


.tabs-outer
{
overflow: visible;
}
</style>


<div id="menu">
<ul id="nav">
<li class="parent"><a href="http://todo-qui.blogspot.com/">Inicio</a></li>
<li class="parent"><a href="#">Contacto ▼ </a>
<ul>
<li class="list"><a href="#"> - Redes sociales ► </a>
<ul>
<li class="list"><a href="#"> - facebook</a></li>
<li class="list"><a href="#"> - twitter</a></li>
<li class="list"><a href="#"> - google+</a></li>
</ul>
</li>
<li class="list"><a href="#"> - tuenti</a></li>
<li class="list"><a href="#"> - ask.fm</a></li>
</ul>
</li>
<li class="parent"><a href="#">Descargas ▼ </a>
<ul>
<li class="list"><a href="#">Windows ► </a>
<ul>
<li class="list"><a href="#"> - juegos torrent</a></li>
<li class="list"><a href"#"> - juegos[MF]</a></li>
</ul>
</li>
<li class="list"><a href"#">multimedia ► </a>
<ul>
<li class="list"><a href="#"> - videos</a></li>
<li class="list"><a href="#"> - peliculas</a></li>
<li class="list"><a href="#"> - musica</a></li>
</ul>
</li>
<li class="list"><a href="#">mac ► </a>
<ul>
<li class="list"><a href="#"> - juegos </a></li>
<li class="list"><a href="#"> - programas</a></li></ul></li></ul></li></ul></div>


<div align=right>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ffffff; border: 2px solid #111111"/><input id="search-btn" value="Buscar" type="submit" style="background: #000000; border: 2px outset #000001; color: #ffffff; font-weight: bold;"/></form></div align=right>