Full width css dropdown menu

Question

I am trying to create pure and simple CSS drop down menu which will open in a full width mode underneath each item but will also keep each drop down menu underneath it\'s pa

Answer 1

/* not very relevant styling */
h1         { font-size: 20px; padding-top: 20px; }
.container { position: relative; margin: 20px auto 0 auto; width: 75%; }
.header    { background: #eee; }
.nav       { background: #ccc; }

/* relevant styling */
body { overflow-x: hidden; } /* trick from css-tricks comments */

/* FIRST LEVEL */

.nav > ul > li { 
  display: inline-block; 
  position: relative; 
  padding: 3px 10px 3px 0;
  z-index: 100;
}

/* SECOND LEVEL */
.nav > ul > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0 1000em; /* trick from css-tricks comments */
  margin: 0 -1000em; /* trick from css-tricks comments */
  z-index: 101;
  visibility: hidden;
  opacity: 0;
  background: rgba(255, 240, 240, 0.8);
}

.nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}

.nav > ul > li > ul > li {
  padding: 3px 0;
}

.nav > ul > li:hover .drop {
  font-weight: bold;
}

  

    
Hank's Big Leauge Widgets
    You want a widget? we got 'em!
  


      
  

    

      

        Products
        

          
Widget A
          
Widget B
          
Widget C
        
      
      

        Locations
        

          
Location A
          
Location B
          
Location C
        
      
      

        Staff
        

          
President
          
VP
          
Manager
        
      
    
  



  
All sorts of content
  
All sorts of content
  
All sorts of content
  
All sorts of content
  
All sorts of content
  
All sorts of content



**CSS and HTML**

Demo

JSFIDDLE