CSS drop left menu stacking - HTML CSS CSS Widget

Description

CSS drop left menu stacking
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.review-announcement {<!-- ww w .  jav a  2  s . c o  m-->
   position:absolute;
   z-index:6;
   left:451px;
   top:121px;
   height:26px;
   width:166px;
   border:3px solid Chartreuse;
   color:yellow;
   font-weight:bold;
   font-size:19px;
   text-align:right;
   padding:16px 16px 16px 0;
   background:blue;
}

.review-announcement:hover {
   color:pink;
   background:OrangeRed;
}

.container {
   position:absolute;
   z-index:2;
   list-style-type:none;
   left:-51px;
   background:grey;
   width:531px;
   border:3px solid BlueViolet;
   color:Chartreuse;
   top:100px;
   display:none;
}

#wrap:hover .container {
   display:block;
}

.reviewarrow-top {
   position:absolute;
   z-index:6;
   border-style:solid;
   height:0;
   width:0;
   top:18px;
   left:13px;
   border-color:yellow;
   border-width:11px 14px 0 0;
}

.reviewarrow-bottom {
   position:absolute;
   z-index:6;
   border-style:solid;
   height:0;
   width:0;
   top:28px;
   left:13px;
   border-color:blue;
   border-width:0 14px 11px 0;
}

.container .col_2 {
   display:inline;
   float:left;
   position:relative;
   margin:0 6px 11px 6px;
   width:156px;
}

.container h3 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:15px;
   font-weight:bold;
   margin:6px 0 9px 0;
   padding-bottom:6px;
   border-bottom:2px solid pink;
   text-align:center;
}

.container p {
   font-family:Helvetica, Arial, sans-serif;
   font-size:13px;
   font-weight:normal;
   margin-left:51px;
   text-align:left;
}
</style> 
 </head> 
 <body> 
  <div id="wrap"> 
   <div class="review-announcement"> 
    <div class="reviewarrow-top"></div> 
    <div class="reviewarrow-bottom"></div>Lorem ipsum do 
   </div> 
   <div class="container"> 
    <div class="col_2"> 
     <h3>Lorem ipsum dolo</h3> 
     <p> <b>Lorem</b>Lorem</p> 
     <p> <b>Lorem</b>Lorem</p> 
     <p> <b>Lorem</b>Lorem</p> 
    </div> 
    <div class="col_2"> 
     <h3>Lorem ipsum dolo</h3> 
     <p> <b>Lorem</b>Lorem</p> 
     <p> <b>Lorem</b>Lorem</p> 
     <p> <b>Lorem</b>Lorem</p> 
    </div> 
    <div class="col_2"> 
     <h3>Lorem ipsum </h3> 
     <p> <b>Lorem</b>Lorem</p> 
     <p> <b>Lorem</b>Lorem</p> 
     <p> <b>Lorem</b>Lorem</p> 
    </div> 
   </div> 
  </div>  
 </body>
</html>
CSS drop left menu stacking - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
