Create menu items with full width of Horizontal Menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Item

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

Description

Create menu items with full width of Horizontal Menu

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">
ul {<!--from w w w.j a  v a  2s.co m-->
   margin:0;
   padding:0;
   display:block;
   background:blue;
}

ul:before, ul:after {
   display:table;
   clear:both;
   content:'';
}

ul li {
   display:block;
   float:left;
   height:31px;
   line-height:31px;
   background:pink;
   padding:0 16px;
   width:26%;
   border-left:2px solid Chartreuse;
   border-right:2px solid yellow;
   text-align:center;
   box-sizing:border-box;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li>menu item 1</li> 
   <li>menu item 1</li> 
   <li>menu item 1</li> 
   <li>menu item 1</li> 
  </ul>  
 </body>
</html>

Related Tutorials