Using Flexbox container with position absolute - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Using Flexbox container with position absolute

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
body {<!--   ww  w .j  a  va2s  . c  om-->
   background:tomato;
   font-size:2.3rem;
   font-weight:bold
}

a {
   color:Chartreuse;
   text-decoration:none;
}

li {
   list-style:none;
}

ul li {
   font-size:2.7rem;
   display:inline-block;
   margin-left:41px;
   text-transform:uppercase;
}

ul li.menu-metier {
   position:relative;
   padding-bottom:26px;
}

ul.sub-menu {
   display:-webkit-box;
   display:flex;
   display:-ms-flexbox;
   position:absolute;
   background:white;
   top:46px;
   left:0;
   right:-601px;
   box-shadow:0 2px 4px yellow, 0 2px 3px rgba(0,0,0,0.25);
}

ul.sub-menu li {
   margin:11px;
   flex-grow:0;
   flex-shrink:2;
   flex-basis:auto;
}

ul.sub-menu li a {
   display:-ms-flexbox;
   display:flex;
   flex-direction:column;
}

ul.sub-menu li a img {
   padding:0;
   margin-bottom:6px;
   align-self:center;
}

ul.sub-menu li a span {
   text-align:center;
   font-size:2rem;
   align-self:center;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul> 
   <li> <a href="#"> <span>AAAA</span> </a> </li> 
   <li class="menu-metier"> <a href="#"> <span>VVVV</span> </a> 
    <ul class="sub-menu"> 
     <li> <a href="#"> <img width="170" height="102" src="https://www.java2s.com/style/demo/InternetExplorer.png"> <span>WWWW</span> </a> </li> 
     <li> <a href="#"> <img width="170" height="102" src="https://www.java2s.com/style/demo/Firefox.png"> <span>QQQQ</span> </a> </li> 
     <li> <a href="#"> <img width="170" height="102" src="https://www.java2s.com/style/demo/Firefox.png"> <span>EEEE</span> </a> </li> 
    </ul> </li> 
   <li> <a href="#"> <span>ADFE agence</span> </a> </li> 
   <li> <a href="#"> <span>Photos</span> </a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials