title: Vertical to Horizontal Sub-Menus
body: <p>On my website at twoguysplayingzelda.com, my sub-menus (desktop view) are currently displayed vertically and I would like to change it to horizontal. When a user hovers over the tab "GAMES", I would like the sub-menu to stretch horizontally almost like a 2nd menu bar with all the games. My menu CSS code is as below. Thanks for any help!</p>
  
  <pre><code>div.navigation.section.no-padding.bg-dark { 
      background: #616161;
  }
  
  .main-menu {        
      font-family: 'Arial', sans-serif;   
      font-size: 1.0em;   
      text-align: center;
  }       
  
  .main-menu li { position: relative; }       
  
  .main-menu &gt; li { float: left; }        
  
  .main-menu &gt; li:before {        
      content: none;  
      display: block; 
      position: absolute; 
      right: 0;   
      top: 50%;   
      margin-top: -18px;  
      margin-right: -13px;    
  }       
  
  .main-menu &gt; li:last-child:before { content: none; }        
  
  .main-menu &gt; li &gt; a {       
      display: block; 
      padding-top: 12px;  
      padding-bottom: 12px;   
      padding-left: 12px; 
      padding-right: 12px;    
      font-size: 1.0em;   
      color: #FFFFFF; 
      text-transform: uppercase;  
      letter-spacing: 1px;    
      font-weight: 400;
  }       
  
  .main-menu &gt; li:first-child &gt; a { margin-left: 0; }     
  
  .main-menu &gt; .has-children &gt; a,     
  .main-menu &gt; .page_item_has_children &gt; a { padding-right: 12px; position: 
  relative; }     
  
  .main-menu &gt; .has-children &gt; a::after,      
  .main-menu &gt; .page_item_has_children &gt; a::after {       
      content: "";    
      display: none;
      border: 5px solid transparent;      
      border-top-color: #999; 
      position: absolute; 
      z-index: 1001;  
      right: 29px;    
      top: 50%;   
      margin-top: -2px;   
  }       
  
  .main-menu li:hover &gt; a { 
      cursor: pointer;
      background: #01B3D9;  
      color: #FFFFFF; }       
  
  .main-menu &gt; .has-children:hover &gt; a::after,        
  .main-menu &gt; .page_item_has_children:hover &gt; a::after { border-top-color: 
  #fff; }     
  </code></pre>
  
  <p>/* Sub menus --------------------------------------- */      </p>
  
  <pre><code>.main-menu li ul {      
      position: absolute; 
      z-index: 10000; 
      display: block; 
      left: -9999px;  
      top: 10px;  
      -webkit-opacity: 0; 
      -moz-opacity: 0;    
      opacity: 0; 
      z-index: 999;   
      -webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out; 
      -moz-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;    
      -ms-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out; 
      -o-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;  
      transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out; 
  }       
  
  .is_mobile .main-menu li ul {       
      -webkit-opacity: 1; 
      -moz-opacity: 1;    
      opacity: 1; 
      display: none;  
  }       
  
  .main-menu &gt; li &gt; ul { padding-top: 20px; }     
  
  .main-menu ul li {      
      float: none;        
      display: block;
      border-top: 1px solid rgba(255,255,255,0.075);              
  }       
  
  .main-menu ul li:first-child { border-top: none; }      
  
  .main-menu ul &gt; .has-children::after,       
  .main-menu ul &gt; .page_item_has_children::after {        
      content: "";
      color: #FFFFFF; 
      display: block; 
      border: 6px solid transparent;  
      border-left-color: rgba(255,255,255,0.4);   
      position: absolute; 
      z-index: 1001;  
      right: 10px;    
      top: 50%;   
      margin-top: -5px;   
  }       
  
  .main-menu ul &gt; .has-children:hover::after,
  .main-menu ul &gt; .page_item_has_children:hover::after { border-left-color: 
  #fff; }             
  
  .main-menu ul li {      
      display: block; 
      width: 240px;   
      background: #616161;    
  }       
  
  .main-menu ul a {
      width: 100%;
      font-size: 1.0em;
      background: #616161;    
      display: block; 
      text-align: left;   
      font-weight: 400;   
      padding: 3px;   
      padding-left: 12px; 
      line-height: 130%;  
      color: #FFFFFF; 
  }       
  
  .main-menu ul a:hover {         
      background: #01B3D9;
      color: #FFFFFF; 
  }       
  
  .main-menu li:hover &gt; ul {      
      -webkit-opacity: 1; 
      -moz-opacity: 1;    
      opacity: 1; 
      left: 138.25%;  
      margin-left: -120px;    
      top: 20.44px;   
  }       
  
  .is_mobile .main-menu li:hover ul { display: block; }       
  
  
  /* Deep down --------------------------------------- */     
  
  
  .main-menu ul li ul { 
      top: 5px; 
  }       
  
  .main-menu ul li:hover &gt; ul {       
      top: 0; 
      left: 240px;    
      margin-left: 0; 
  }       
  
  .main-menu ul ul li { background: #3d3d3d; }        
  .main-menu ul ul ul li { background: #4d4d4d; }     
  .main-menu ul ul ul ul li { background: #4d4d4d; }      
  </code></pre>