﻿.menu
{
	width:745px; 
	height:32px; 
	font-size:0.9em; 
	font-family: Verdana, Arial, helvetica, Sans-Serif;
	position:relative; 
	z-index:100;
	margin: 0px auto 1px auto;
}

/* Borramos todos los estilos inherentes de las listas no ordenadas como las bolitas y el sangrado*/
.menu ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.menu ul ul
{
	width: 100px;
}

/* Hacemos la lista flotante para que se vea horizontalmente y hacemos la posición relativa para poder controlar la posición del menu desplegable */
.menu li
{
	float: left;
	width: 124.1px;
	position: relative;
}

/*Estilo de los links de primer nivel */
.menu a, .menu a:visited
{
	display: block;
	text-decoration: none;
	color: #444342;
	width: 123px;
	height: 30px;
	background: #ff9d02;
	/*padding-left: 10px;*/
	text-align:center;
	line-height: 29px;
	
}

/* Estilo de fondo de los elementos de segundo nivel*/
.menu ul ul a.drop, .menu ul ul a.drop:visited
{
	background: #d4d8bd;
}

/* Escondemos el nivel inferior y le damos una posición absoluta para que no ocupe espacio*/
.menu ul ul
{
	visibility: hidden;
	position: absolute;
	height: 0;
	top: 31px;
	left: 0;
	width: 100px;
}

/* Le damos estilo a la tabla para que no ocupe espacio en el área de trabajo, imprescindible para que funcione en IE6 */
.menu table
{
	position: absolute;
	top: 0;
	left: 0;
	border-collapse: collapse;
}

/* Estilo de los links de segundo nivel */
.menu ul ul a, .menu ul ul a:visited
{
	background: #d4d8bd;
	color: #000;
	height: auto;
	line-height: 1em;
	padding: 5px 10px;
	width: 100px;
}

/*Estilo del hover de los elementos de segundo nivel*/
.menu ul ul a.drop:hover
{
	background: #c9ba65;
}
.menu ul ul :hover > a.drop
{
	background: #c9ba65;
}

/* Estilo de los links de segundo nivel */
.menu ul ul a, .menu ul ul a:visited
{
	background: #d4d8bd;
	color: #000;
	height: auto;
	line-height: 1em;
	padding: 5px 10px;
	width: 103px;
}

/* Estilo del hover de los elementos de primer nivel */
.menu a:hover, .menu ul ul a:hover
{
	color: #fff;
	background: #949e7c;
}
.menu :hover > a, .menu ul ul :hover > a
{
	color: #fff;
	background: #949e7c;
}

/*Hacemos el segundo nivel visible cuando posicionamos el ratón en los elementos de primer nivel */
.menu ul li:hover ul, .menu ul a:hover ul
{
	visibility: visible;
}

