.menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
 
.menu li{
  float: left;
  position: relative;
  width: 13vw;
}

.menu li ul {
position: absolute;
left:-9999em;
top:30px;
}

.menu ul > li:hover ul {
left:0;
}

.menu ul li a{
  text-decoration: none;
  background: black;
  display: block;
  color: #ffd700;
<!--  font-weight: bold; -->
  font-family: sans-serif;
  text-align: center;
<!--  border-bottom: 2px solid red; -->
  width: 150px;
  border-left: 1px solid #d60016;
  padding: 5px;
}
 
.menu ul li ul li a{
  background: black;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid #333;
  font-size: 14px;
}
 
.menu li a:hover{
  background: rgb(250,0,0);  <!--rgb(248,140,0);-->
  transition: .5s;
}
 
.menu ul li ul li a:hover{
  padding-left: 15px;
  
}
[/css]