<center><div id="menu">
<ul >
  <li><a href="#"> option 1 </a>
  <ul>
    <li> option 1.a with long description which a lil bit odd</li>
    <li> option 1.x </li>
    </ul>
  </li>
  <li><a href="#"> option 2 </a>
  <ul>
    <li> option 2.a </li>
    <li> option 2.b </li>
    <li> option 2.x </li>
    <li> short desc.
    <ul>
      <li>another submenu</li>
      </ul>
    </li>
    </ul>
  <li>
    <a href="#"> option 3 </a>
     <ul> 
        <li> option 3.a </li>
        <li> 
          option 3.b with quite long and
          rigorous description too.
       </li>
      </ul>
    </li>
</ul>
</div>
  <br/><br/>
  <span style="font-family:Calibri;font-weight:bold;font-size:12px;">Simplification of <a target="_blank" href="https://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu">Pure CSS Drop Down Menu</a>, a great crystal clear tutorial by Chris Spooner</span>
  
  </center>

body
{
  font-family:Courier;
  font-weight:700;font-size:18px;
  background:#effefe;}

#menu ul {
  background: orange; 
  box-shadow: 0px 2px 5px grey;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;}

#menu ul li {float:left;padding:0;}

#menu ul li:hover {
  cursor:pointer; 
  background: #ff8800;}
  
#menu ul li a {
  display: block; 
  padding: 20px 40px; 
  color: black; 
  text-decoration: none;}

#menu ul ul {
  display: none;
  background: orange;   
  padding:0px;width:33.3%;
  position: absolute;top: 100%;}

#menu ul li:hover > ul {display: block;}

#menu ul ul li {
  float: none; 
  text-align:center;
  position: relative;
  padding:10px;
  border-bottom:1px solid #ffb861;
  border-top:1px solid #e37d00;}

#menu ul ul ul { 
  position:absolute;
  top:-1px;
  left:100%;
  width:120%;}

//no fade fx and all, this is the basic pattern I suppose.
//no plugin or custom script.