/* ---------------- NAV ---------------- */

nav {  float: right;
       z-index: 100;
}
nav ul {
       padding: 0;
       list-style: none;
       position: relative;
       display: inline-table;
       font-family: verdana;
       font-weight: bold;
       font-size: 16px;
       font-size: 1rem;
}
nav ul:after {
       content: "";
       clear: both;
       display: block;
}
nav ul li {
       float: left;
}
nav ul li:hover {
       background-image: url(arr.svg);
       background-repeat: no-repeat;
       background-position: 15px 52px;
}
nav ul li:hover > ul {
       display: block;
}
nav ul li:hover a {
       color: darkslategray;
}
nav ul li a {
       display: block;
       padding: 23px 10px;
       color: darkslategray;
       text-decoration: none;
       font-weight: bold;
       transition: color 0.5s;
       -moz-transition: color 0.5s;
       -webkit-transition: color 0.5s;
       -o-transition: color 0.5s;
}
nav ul li a:hover {
       color: whitesmoke;
       text-decoration: none;
}
nav ul ul {
       background-image: none;
       display: none;
       background-color: whitesmoke;
       border: 1px solid silver;
       border-radius: 7px;
       padding: 7px 0px;
       position: absolute;
       top: 100%;
       font-family: arial;
       font-weight: 100;
       font-size: 14px;
       font-size: 0.88rem;
}
nav ul ul li {
       float: none;
       position: relative;
       border: 0px solid gainsboro;
       border-bottom-width: 1px;
}
nav ul ul li:last-child {
       border-bottom-width: 0px;
}
nav ul ul li a {
       padding: 15px 40px;
       color: darkslategray;
       background-color: whitesmoke;
       font-weight: 100; 
       transition: background-color 0.5s;
       -moz-transition: background-color 0.5s;
       -webkit-transition: background-color 0.5s;
       -o-transition: background-color 0.5s;
}
nav ul ul li a:hover {
       color: darkslategray;
       background-color: gainsboro;
}