/* http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu */

body {
   -webkit-tap-highlight-color: transparent;
}

.menu {
   width: 100%;
   text-align: center;
   white-space: nowrap;
}

.menu * {
   z-index: 100;
   border-color: inherit;
   background-color: inherit;
}

.menu a {
   color: inherit;
   text-decoration: none;
}

.menu a,
.menu span[aria-haspopup="true"],
.menu div[aria-haspopup="true"] {
   display: none;
   padding: 0 1em;
}

/* default hover style */
.menu a:hover,
.menu *:focus {
   text-decoration: underline;
   outline: none;
}

/* top level menu bar */
.menu ul {
   position: relative;
   display: table;
   padding: 0;
   margin: 0 auto;
   list-style: none;
}

/* top level menu bar items */
.menu ul li {
   float: left;
   text-align: left;
}

/* menu bar text (link) */
.menu ul li a,
.menu ul li span[aria-haspopup="true"] {
   display: block;
}

/* menu bar text (drop down) */
.menu ul li span[aria-haspopup="true"] {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default;
}

/* drop down menu */
.menu ul ul {
   position: absolute;
   display: none;
   padding: 0;
}

/* drop down menu (hover over parent) */
.menu ul li:hover > ul {
   display: block;
}
/* do not combine this selector with others -- not supported by all browsers */
.menu ul li:focus-within > ul {
   display: block;
}

/* drop down menu items */
.menu ul ul li {
   position: relative;
   float: none; 
   left: 0;
   border-top-width: 2px;
   border-top-style: solid;
}

/* drop down menu item text */
.menu ul ul li a,
.menu ul ul li span[aria-haspopup="true"] {
   padding: 0 1em;
}

/* third level menu */
.menu ul ul ul {
   left: 100%;
   top: 0;
}

.menu ul ul ul li:first-child {
   border-top: none;
}