CSS full width roll over menu, full width submenu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu sub menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu sub menu

Description

CSS full width roll over menu, full width submenu

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from www. j  a  va2  s  . co  m-->
   margin:0px;
   padding:0px;
   text-align:center;
}

.navBar {
   width:100%;
   background-color:Chartreuse;
   z-index:0;
}

.nav {
   width:1001px;
   margin:0px auto 0px auto;
   z-index:11;
}

.dropdown {
   position:relative;
   display:block;
   cursor:pointer;
   float:left;
}

.dropdownText {
   text-decoration:none;
   padding:21px 21px;
   background-color:yellow;
   color:blue;
   position:relative;
   margin:0px 0px 0px 0px;
   font-size:15px;
   z-index:6;
}

.dropdownText:hover {
   color:pink;
}

.dropdown-content {
   display:block;
   position:fixed;
   left:0;
   background-color:OrangeRed;
   width:100%;
   box-shadow:0px 9px 17px 0px grey;
   padding:13px 17px;
   margin:-201px 0px 0px 0px;
   transition:all ease-out .6s;
   opacity:0;
   max-height:0;
   transition:max-height 0.16s ease-out;
   overflow:hidden;
}

.dropdown:hover .dropdown-content {
   display:block;
   margin:0px 0px 0px 0px;
   opacity:100;
   max-height:501px;
   transition:max-height 2s ease-in;
}
</style> 
 </head> 
 <body> 
  <div style="width:100%; height:100px; background-color:#212121; z-index:150; position:relative;"></div> 
  <div class="navBar"> 
   <div class="nav"> 
    <div class="dropdown"> 
     <div class="dropdownText">
       Lorem ipsum dolor sit 
     </div> 
     <div class="dropdown-content"> 
      <div style="float:left; width:32%"> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
      </div> 
      <div style="float:left; width:32%"> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
      </div> 
      <div style="float:left; width:32%"> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
      </div> 
     </div> 
    </div> 
    <div class="dropdown"> 
     <div class="dropdownText">
       Lorem ip 
     </div> 
     <div class="dropdown-content"> 
      <div style="float:left; width:49%"> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
      </div> 
      <div style="float:left; width:49%"> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
       <p> <a href="#">Lorem ipsum do</a> </p> 
      </div> 
     </div> 
    </div> 
    <div class="dropdown"> 
     <div class="dropdownText">
       Lorem ipsu 
     </div> 
     <div class="dropdown-content"> 
      <p> <a href="#">Lorem ipsum do</a> </p> 
      <p> <a href="#">Lorem ipsum do</a> </p> 
      <p> <a href="#">Lorem ipsum do</a> </p> 
     </div> 
    </div> 
    <div class="dropdown"> 
     <div class="dropdownText">
       Lorem ipsum 
     </div> 
     <div class="dropdown-content"> 
      <p> <a href="#">Lorem ipsum do</a> </p> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials