.clearfix:after {
content: "";
display: table;
}

.nav-box {
   width:100%;
   background: #8b0000;
}
 
.nav-menu {
   /*position:relative;*/
   display:inline-block;
   /* padding-left:3%; */
   width:100%;
}

.nav-menu > ul >li > ul > li > a:hover {color:gold;}

.nav-menu > ul >li > ul > li {padding:3% 0%;} 
 
.nav-menu li {						/* style for primary link headings */
   display: inline-block;
   list-style-type: none;
   color:silver;
   padding-right:3%;
   
}

.nav-menu ul li:hover > ul {display:inline-block; padding:0.5% 1%; text-align:center;}

.nav-menu > ul > li:after {
   content: "\25BC"; /*escaped unicode for the down arrow*/
   font-size: .6em;
   display: inline;
   position: relative; top:15px;
   }
/* Note — Make adjustments to the arrow's position using the top, bottom, right, or left properties. 
 Note — If not all of your menu items contain dropdowns, don't style the entire nav-menu class. 
 Instead, add another class (such as dropdown) to each HTML li element where you'd like an arrow. Refer to that class instead in the code above. */
 
.submenu{							/* style for submenu box */
   position:absolute; top:11%;
   display:none;
   background: #000000;
}

.a4{font-family:arial, verdana, sans-serif; font-size:12px; color:White; text-decoration:none;}
.a5{color:LightGray; text-decoration:none; font-weight:bold;}