/*Barra de navegacion*/

#nav{
  width: 100%;
  height: 40px;
  background-color: #333333;
  color: white;
  font-family: sans-serif, Arial, Helvetica, ;
  font-size: 16px;
  box-shadow: 0px 0px 10px  gray;
}
#nav > ul >li{
  line-height: 40px;
  float: left;
  border-right: 2px solid gray;
  transition: all 500ms;/*se activa el efecto*/
}

#nav ul{
  list-style: none;
  text-decoration: none;
  margin: 0px auto;
  width: 1090px;
}

#nav> ul> li a{
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
}

#nav > ul >li >a:first-child{
  border-left: 
  1px solid gray ;
}

#nav > ul > li:hover{
  background-color: #70b231;
  box-shadow: 0px 0px 4px green inset;/*efecto interno */
  
}

/*MENU DESPLEGABLE*/
#nav > ul > li > ul{
  display: none;
  position: absolute;/*para que no desfigure el sitio web*/
  width: 160px;
  box-shadow: 0px 2px 2px gray;
  z-index: 1;/*para que se supersponga por ensima de todo*/
}

#nav > ul > li:hover > ul{
  display: block;
}

#nav > ul > li:hover > ul > li{
 background-color: #f2f1f0;
 border-bottom: 1px solid #d6d6d6;
 padding: 8px;/*rellena separacion de los elementos*/
 line-height: 25px;/*centrar vericalmente*/
 font-size: 13px;
 transition: all 300ms;
}

#nav > ul > li:hover > ul > li a{
 color: #666666;
}

#nav > ul > li:hover > ul > li:hover{
 box-shadow: 0px 0px 3px #666666 inset;
/*background: rgb(182, 178, 178) ;
*/
}