gistfile1.css

/* ... basics ... 
-------------------------------------------------------------------------------------------------*/
nav {
  border: 1px solid #000;
  border-radius: 8px;
  float: left;
}
ul,
li,
a,
span {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ... basics ... END
-------------------------------------------------------------------------------------------------*/



/* ... all levels ... 
-------------------------------------------------------------------------------------------------*/
nav,
ul ul {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.75);
}
li {
  float: left;
}
a,
span {
  height: 44px;
  line-height: 44px;
  text-decoration: none;
  padding: 0 20px;
  background: red;
  color: #fff;
}
li:hover > a,
li > span {
  background: #fff;
  color: red;
}
/* ... all levels ... END
-------------------------------------------------------------------------------------------------*/



/* ... first level ... 
-------------------------------------------------------------------------------------------------*/
li:first-child > a,
li:first-child > span {
  border-radius: 8px 0 0 8px;
}
li:last-child > a,
li:last-child > span {
  border-radius: 0 8px 8px 0;
}
li:only-child > a,
li:only-child > span {
  border-radius: 8px;
}
/* ... first level ... END
-------------------------------------------------------------------------------------------------*/



/* ... second level ... 
-------------------------------------------------------------------------------------------------*/
li li {
  float: none;
}
li li:first-child > a,
li li:first-child > span {
  border-radius: 8px 8px 0 0;
}
li li:last-child > a,
li li:last-child > span {
  border-radius: 0 0 8px 8px;
}
li li:only-child > a,
li li:only-child > span {
  border-radius: 8px;
}
ul ul {
/** */
  display: none;
/** */
  position: absolute;
  border: 1px green solid;
  border-radius: 8px;
}
li:hover > ul {
  display: block;
}
li li a {
  background: blue;
}
li li:hover > a,
li li > span {
  background: #fff;
  color: blue;
}
/* ... second level ... END
-------------------------------------------------------------------------------------------------*/