Try it Live

<!DOCTYPE html>
<html>
  <head>
    <style>
     * {
      padding:0;
      margin:0;
     }
	  
     div.dropdown-vertically {
      position:relative;
      width:200px;
     }
	 
     div.dropdown-vertically ul {
      list-style: none;
      background-color:lightgreen;
      font-size:20px;
     }
	 
     div.dropdown-vertically li {
      position:relative;
      border:2px solid black;
     }
	 
     div.dropdown-vertically a { 
      display:block;
      text-decoration:none;
      padding:10px;
      color:black;
     }
	
     div.dropdown-vertically li:hover > a {
      background:black;
      color:lightgreen;
     }
	 
     div.dropdown-vertically ul ul {
      position:absolute;
      top:0;
      width:100%;
      visibility:hidden;
     }
	 
     div.dropdown-vertically li:hover > ul {
      left:100%;
      visibility:visible;
     }
    </style>
  </head>
  <body>
  <h2>Example for CSS Vertical drop-down menu</h2><br>
    <div class="dropdown-vertically">
      <ul>
        <li><a href="">Home</a></li>
        <li>
          <a href="#">Services</a>
          <ul>
            <li><a href="#">Logo Design </a></li>
            <li> <a href="#">Digital Marketing</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Video Editing</a></li>
          </ul>
        </li>
        <li><a href="">Courses</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li> <a href="#">CSS</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
          </ul></li>
        <li><a href="">About Us</a></li>
      </ul>
    </div>
  </body>
</html>

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     * {
      padding:0;
      margin:0;
     }
      
     div.dropdown-vertically {
      position:relative;
      width:200px;
     }
     
     div.dropdown-vertically ul {
      list-style: none;
      background-color:lightgreen;
      font-size:20px;
     }
     
     div.dropdown-vertically li {
      position:relative;
      border:2px solid black;
     }
     
     div.dropdown-vertically a { 
      display:block;
      text-decoration:none;
      padding:10px;
      color:black;
     }
    
     div.dropdown-vertically li:hover > a {
      background:black;
      color:lightgreen;
     }
     
     div.dropdown-vertically ul ul {
      position:absolute;
      top:0;
      width:100%;
      visibility:hidden;
     }
     
     div.dropdown-vertically li:hover > ul {
      left:100%;
      visibility:visible;
     }
    </style>
  </head>
  <body>
  <h2>Example for CSS Vertical drop-down menu</h2><br>
    <div class="dropdown-vertically">
      <ul>
        <li><a href="">Home</a></li>
        <li>
          <a href="#">Services</a>
          <ul>
            <li><a href="#">Logo Design </a></li>
            <li> <a href="#">Digital Marketing</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Video Editing</a></li>
          </ul>
        </li>
        <li><a href="">Courses</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li> <a href="#">CSS</a></li>
            <li><a href="#">JAVA</a></li>
            <li><a href="#">PHP</a></li>
          </ul></li>
        <li><a href="">About Us</a></li>
      </ul>
    </div>
  </body>
</html>
​