/*<ol> view */
#menu {
  width:800px;
  margin:0 auto;
  padding:0;
  list-style-type:none;
  background-color:#FFF; /*FDF;*/
  border:0px solid #FA0;
}

/*<ol>high correction */
#menu:after {
  content:'';
  display:block;
  clear:both;
}

#menu > li {
  width:20%;   /* ? */
  float:left;
  position:relative;  /* ? */
}

/*ul > li:nth-child(even) {
  background-color:gold;
}

ul > li:nth-child(odd) {
  background-color:lightblue;
}
*/
#menu > li > a {
  display:block;
  height:100%; /* ? */
  text-decoration:none;
  color:#000;
  background-color:#DDD;
  padding:15px;
  text-align:center;
  box-shadow:0 0 0 1px #FFF inset;
  background-image:linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%);
}

#menu > li:hover > a {
  color:#00F;
  background-color:#FFF;
  background-image:none;
}

/* <ul> view */
#menu > li > ul {
  min-width:100%; /* ? */
  visibility:hidden;
  position:absolute;
  right:0; /* ? */
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
/*  display:none;  ? */
}

#menu > li:hover > ul {
/*  display:block; ? */
  visibility:visible;
}

#menu > li > ul > li {
  box-shadow:0 -4px 4px -4px #AAA;
}

#menu > li > ul > li > a {
  display:block;
  white-space:nowrap; /* ? */
  text-decoration:none;
  padding:15px;
  color:#000;
}

#menu > li > ul > li:hover > a {
  color:#00F;
  background-color:#F0F0F0;
  background-image:linear-gradient(#FFF, #EEE, #FFF);
}

/* Animating droping part menu CSS */
      /* <ul> */
#menu > li > ul {
  transform:scaleY(0);
  -webkit-transform:scaleY(0);
  transform-origin:50% 0;
  -webkit-transform-origin:50% 0;
  transition:250ms;
}

/* <ul> elements after <li> hover*/
#menu > li:hover > ul {
   transform:scaleY(1);
   -webkit-transform:scaleY(1);
}

#menu > li > ul > li:first-child {
   box-shadow:none;
}

#menu > li > ul > li:last-child {
  box-shadow:0 -4px 4px -4px #AAA, 0 4px 4px -4px #AAA;
}