have menu items stretched in full width menu with css for any screen automatically - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Item

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Item

Description

have menu items stretched in full width menu with css for any screen automatically

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">
.report_types_section ul {
   padding:0;
}

.report_types_section ul li {
   position:relative;
   display:inline-block;
   width:17.7%;
   float:left;
}

.report_types_section ul li a {
   float:left;
   text-decoration:none;<!--from  ww w.  jav a 2 s  .  com-->
   color:Chartreuse;
   font-size:19px;
   display:block;
   text-align:center;
   width:100%;
   text-align:center;
   text-transform:uppercase;
}

.report_types_section ul li:after {
   content:" | ";
   color:yellow;
   font-size:19px;
   float:right;
   position:absolute;
}
</style> 
 </head> 
 <body> 
  <div class="report_types_section"> 
   <ul> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials