Por fa alguien me podria orientar como lograr este menu con CSS
(agreguenle el www por que cada vez q quiero colocarlo no me acepta el msg si de paso alguien me explica por q... por q aun no se cuales son las reglas del foro) .unprg.edu.pe
ya tengo algo similar pero mi problema es que el submenu me aparece atras del menu principal que propiedades puedo cambiar ya que lo tengo con listas...
por si acaso este es el codigo ya que no encontré la manera de insertar una imagen...
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
<!--
.menuTitle {
font-family:comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:normal;
line-height: 12px; }
a:link {
text-decoration: none; }
a:visited {
text-decoration: none; }
a:hover {
text-decoration: none; }
a:active {
text-decoration: none; }
ul { /* todas las opciones*/
margin: 0;
padding: 0;
list-style: none;
width: 140px;
border-bottom:1px solid #000000;/*#A2A2A2*/
/*borde final de cada bloque*/ }
ul li {
position:relative; }
li ul { /*conj de elementos de cada opción*/
position:absolute;
left: 130px;
top: 5;
display: none;
/* border-style:none;*/
width:145px; }
ul li a { /*cada opcion*/
display: block;
text-decoration: none;
color: #000000; /*ffffff;*/
background:url(images/fondoaux.gif);
padding: 7px;
border: 1px solid #000000/*#A2A2A2*/;
border-bottom: 1;
width:inherit;
clear:both;
}
ul li ul li a{ /*cada elemento de la opción*/
background:url(images/fondoaux.gif);
/* color:#666666;*/
border-color:#000000/*#A2A2A2*/;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block; }
ul li a:hover{
BACKGROUND: #f9f9f9;
COLOR:#004080;
}
LI UL A:hover {
BACKGROUND:#999999;
COLOR:#ffffff;
}
-->
</style>
<body>
<ul type="disc" id="nav">
<li class="menuTitle"><a href="#">Periodísticos</a>
<ul>
<li><a href="?System=Noticiasdel21&action=Inicio" >Noticias del 21</a></li>
<li><a href="?System=AmpliaciondeNoticias&action=Inicio" >Ampliación de Noticias</a></li>
<li><a href="?System=AbriendoFuego&action=Inicio">Abriend o Fuego</a></li>
<li><a href="?System=EnDirecto&action=Inicio">En Directo</a></li>
<li><a href="?System=MinutoaMinuto&action=Inicio">Minuto a minuto</a></li>
<li><a href="?System=TeleSemana&action=Inicio">Telesemana </a></li>
<li><a href="?System=PuntoDeEncuentro&action=Inicio">Punt o de Encuentro </a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Deportivos</a>
<ul>
<li><a href="?System=AntesalaDeportiva&action=Inicio">Ant esala Deportiva </a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Entretenimento </a>
<ul>
<li><a href="?System=ComoenCasa&action=Inicio">Como en Casa</a></li>
<li><a href="?System=LaGranPena&action=Inicio">La Gran Peña de Chiclayo</a></li>
<li><a href="?System=MusikparatusOjos&action=Inicio">Musi k para tus ojos</a></li>
<li><a href="index2.php?System=MasRock&action=Inicio">+ Rock </a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Religiosos</a>
<ul>
<li><a href="index2.php?System=ParedeSufrir&action=Inicio ">Pare de Sufrir</a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Programacion CBN</a>
<ul>
<li><a href="#">Vida Dura</a></li>
<li><a href="#">Agua Viva</a></li>
<li><a href="#">Club 700 Hoy</a></li>
<li><a href="#">One Cubed</a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Culturales
</a>
<ul>
<li><a href="#">Culturales del 21</a></li>
<li><a href="#">Rescatando Tradiciones</a></li>
</ul>
</li>
<li class="menuTitle"><a href="#">Cine</a></li>
</ul>
</body>
</html>
gracias de antemano