Ejercicio 3

💻 Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name ="author" content="Jostyn VY">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/menu.css">
    <title>Menu</title>
</head>

<body>
  <script type="text/javascript">

function mostrarsubmenu(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

  </script>

<div class="menu" id="menucontenidos">
<dl>
    <dt onmouseover="javascript:mostrarsubmenu('smenu1');"><a target="cuerpo" href="http://port2w2/html_introduccion.html" title="HTML">HTML</a> </dt>
    <dd style="display: block;" id="smenu1">
    <ul>
      <li><a target="cuerpo" href="http://port2w2/html_introduccion.html">Introducción</a></li>
      <li><a href="http://port2w2/html_formato.html">Formato, listas y tablas</a></li>
      <li><a href="http://port2w2/html_hipervinculos_imagenes.html">Hipervínculos e Imágenes</a></li>
      <li><a href="http://port2w2/html_applet_audio_video_flash.html">Applet, audio, vídeo y otros objetos</a></li>
      <li><a href="http://port2w2/html_formularios.html">Formularios</a></li>
      <li><a href="http://port2w2/html_marcos.html">Marcos - Frames</a></li>
    </ul>
    </dd>
</dl>

<dl>
      <dt onmouseover="javascript:mostrarsubmenu('smenu2');"><a target="cuerpo" href="http://port2w2/css_introduccion.html" title="CSS">CSS</a></dt>
    <dd style="display: none;" id="smenu2">
    <ul>
      <li><a target="cuerpo" href="http://port2w2/css_introduccion.html">Introducción</a></li>
	  <li><a target="cuerpo" href="#%22">Modelo de cajas, fuentes, colores y tablas</a></li>
    </ul>
    </dd>

</dl>
<dl><dt onmouseover="javascript:mostrarsubmenu();">JavaScript</dt></dl>
<dl><dt onmouseover="javascript:mostrarsubmenu();">PHP</dt></dl>
</div>

<div class="textoinferior">.:: Sección  &lt; Contenidos &gt; ::.</div>


<br>

</body>
</html>

🎨 Código CSS


/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
  body {
	margin: 0pt;
	padding: 0pt;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
	font-family: verdana,arial,sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 80%;
	line-height: normal;
	font-size-adjust: none;
	font-stretch: normal;
	background-attachment: scroll;
	background-color: #93a8ac;
	background-image: none;
	background-repeat: repeat;
	background-position: 0% 50%;
    }

  dl, dt, dd, ul, li {
	margin: 0pt;
	padding: 0pt;
	list-style-type: none;
	color: #666666;
    }

  .menu {
	margin-bottom: 5px;
	margin-left: 0px;
	border-top-color: rgb(102, 102, 102);
	top: 0pt;
	left: 0px;
	position: fixed;
	border-top-width: 4px;
	z-index: 100;
	width: 100%;
	margin-top: 0px;
    }

  .menu dl { float: left;
    width: 100%;
    }

  .menu dt { border: 1px solid gray;
    margin: 1px;
    background: rgb(204, 204, 204) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    }

  .menu dd { border: 1px solid gray;
    display: none;
    }

  .menu li { background: rgb(255, 255, 255) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    text-align: center;
    }

  .menu li a, .menu dt a { border: 0pt none ;
    text-decoration: none;
    display: block;
    height: 100%;
    color: rgb(0, 0, 0);
    background-color: rgb(244, 214, 255);
    }

  .menu dt a { text-align: center;
    background-color: rgb(204, 204, 204);
    }

  .menu li a:visited, .menu dt a:visited { color: rgb(102, 0, 0);
    }

  .menu li a:hover, .menu dt a:hover { background: rgb(238, 238, 238) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    color: rgb(0, 0, 204);
    font-weight: bolder;
    font-size: medium;
    }

  #contenedor { padding: 10px;
    position: relative;
    top: 20px;
    left: 0pt;
    }

  #localizadormenu { margin: 0pt;
    padding: 0pt;
    position: fixed;
    background-color: rgb(213, 193, 141);
    height: 1.6em;
    width: 100%;
    z-index: 11;
    }

  #localizadormenu p { margin-top: 0px;
    margin-left: 2%;
    font-size: 1.2em;
    font-weight: bold;
    color: rgb(255, 255, 255);
    }

  #localizadormenu a { z-index: 12;
    color: rgb(55, 63, 104);
    font-stretch: ultra-condensed;
    font-weight: bold;
    }

  #localizadormenu a:hover { color: rgb(181, 177, 154);
    }

  #sinpuntos { height: 100%;
    background-image: url(../../imagenes/barrasinpuntos.gif);
    background-position: center;
    background-repeat: repeat;
    z-index: 110;
    float: right;
    position: static;
    width: 8px;
    }

  #conpuntos { height: 27px;
    top: 45%;
    background-image: url(../../imagenes/barraconpuntos.gif);
    float: right;
    z-index: 110;
    position: static;
    width: 8px;
    }
.textoinferior {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: lighter;
	position: absolute;
	bottom: 0px;
	text-align: center;
	z-index: 120;
	color: #333333;
	font-style: italic;
	font-variant: small-caps;
	width: 100%;
}

📸 Resultado del ejercicio

Resultado
⬅ Volver