Cómo crear un menú con submenús usando HTML, CSS y JavaScript

  • Autor Autor rotherus
  • Fecha de inicio Fecha de inicio
rotherus

rotherus

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Hola amigos tengo este problema y creo que me falta un style o un js pero no se cual asi que mejor le pregunto a ustedes y bueno lo que quiero lograr es que al pasar el mouse sobre un menu salgan submenus.

Buneo aca les dejo mi codigo

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
nav#top-menu{
	margin-top:10px;
position: relative;
height: 28px;
position: relative;
z-index: 2;
margin: 0 0 15px;
}

nav#top-menu ul{
	height: 28px;
position: relative;
z-index: 2;
float:left;
}

nav#top-menu li  {
	margin: 0px 2px 0;
float: left;
position: relative;
z-index: 2;
height: 27px;
}
nav#top-menu li a {
	display: block;
height: 24px;
line-height: 24px;
padding: 0 15px;
color: #222;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 12px;
text-decoration: none;
font-weight: bold;
}

nav#top-menu li:last-child a{ border-right: none;}
nav#top-menu li:first-child a{ border-left: none;}

nav#top-menu ul li.active{	}
nav#top-menu li a:hover{
	padding: 0 15px;
width: auto;
top: 0;
background-color: #3F3F3F;
background-image: -moz-linear-gradient(#3F3F3F,#1F1F1F);
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#3F3F3F),to(#1F1F1F));
background-image: -webkit-linear-gradient(#3F3F3F,#1F1F1F);
background-image: -o-linear-gradient(#3F3F3F,#1F1F1F);
color: white;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}

#top-menu > ul > li > ul {
position: absolute;
display: none;
background: rgba(0, 0, 0, 0.9);
width: 200px;
padding: 5px 0;
margin-top: 3px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#top-menu > ul > li > ul li a {
display: block;
height: 26px;
line-height: 26px;
padding: 0 10px;
color: white;
text-decoration: none;
text-shadow: none;
}

#top-menu > ul > li > ul li a:hover {
color: white;
text-shadow: 0 1px 0 black;
padding: 0 10px;
background-color: #4388BD;
background-position: 95% center;
background-repeat: no-repeat;
}
</style>
</head>

<body class="asd">
<nav id="top-menu">
	<ul>
    	<li>
        	hola
            	<ul>
                	<li>hola</li>
                </ul>
        </li>			
    </ul>	
</nav>
</body>
</html>

espero me ayuden el menu que quiero lograr es del estilo de esta pagina Enlace eliminado
 
Cuantame que Plataforma es?
 
Bueno cuando me salga la voy a pasar a wordpress
 
Atrás
Arriba