Display:inline-block and span with position:relative to build multi-column dropdown - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

Display:inline-block and span with position:relative to build multi-column dropdown

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">

.menu {<!-- w  w w .  j a v a2 s  . c  o m-->
   position: absolute;
   left: 10px;
   top: 100%;          
   display: inline-block;
   padding-left: 5px;
   padding-right: 5px;
   float: left;
   min-width: 50px;
   list-style: none;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 4px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.row {
   display: inline-block;
   min-width: 80px;
   vertical-align: top;
}
ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
}
li:hover {
   cursor: hand;
   background-image: none;
   background-repeat: no-repeat;
   background-color: rgba(25, 102, 151, 0.5);
}
.dropdown {
   position:relative;
   display: block;
}
button {
   display:inline-block;
}


      </style> 
 </head> 
 <body> 
  <section> 
   <button>123</button> 
   <button>123</button> 
   <span class="dropdown"> <a href="#">*</a> 
    <div class="menu"> 
     <div class="row"> 
      <ul> 
       <li>test</li> 
       <li>test</li> 
       <li>test</li> 
      </ul> 
     </div> 
     <div class="row"> 
      <ul> 
       <li>test</li> 
       <li>test</li> 
      </ul> 
     </div> 
     <div class="row"> 
      <ul> 
       <li>33</li> 
       <li>33</li> 
       <li>33</li> 
      </ul> 
     </div> 
    </div> </span> 
  </section>  
 </body>
</html>

Related Tutorials