Style two level menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

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

Description

Style two level menu

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
  <style id="compiled-css" type="text/css">
@font-face {
   font-family:'FontAwesome';
   src:url('https://www.java2s.com/style/demo/Google-Chrome.png') format('truetype');
}

html {<!--  w  w w.ja v a2 s .c  o  m-->
   height:100%;
}

body {
   height:100%;
   margin:0;
   padding:9px;
   position:relative;
   box-sizing:border-box;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#leftNav {
   height:100%;
   width:100px;
   text-align:center;
   background-color:Chartreuse;
   color:yellow;
   border-radius:4px;
   padding-top:9px;
}

#mainBody {
   padding-left:7px;
   position:relative;
}

.moduleMenu1, .moduleMenu2 {
   position:absolute;
   box-sizing:border-box;
   color:blue;
   top:0;
   display:table;
   max-width:801px;
   background-color:pink;
   border:3px solid OrangeRed;
   border-radius:4px;
   box-shadow:2px 2px 6px grey;
}

.moduleMenu2 {
   top:37px;
}

.moduleMenu1>div, .moduleMenu2>div {
   display:table-row;
}

.moduleMenu1>div>a, .moduleMenu1>div>a:visited, .moduleMenu2>div>a, .moduleMenu2>div>a:visited {
   color:grey;
   text-decoration:none;
   display:table-cell;
   border:3px solid BlueViolet;
   box-sizing:border-box;
   padding:5px 13px;
   text-align:center;
   font-size:17px;
   white-space:nowrap;
}

.moduleMenu2>div>i:first-child {
   margin-left:15px;
   width:21px;
   text-align:left;
}

.moduleMenu1>div>a:hover, .moduleMenu2>div>a:hover {
   border-radius:5px;
   background-color:Chartreuse;
   cursor:pointer;
}
</style> 
 </head> 
 <body> 
  <title>Lorem ipsum dolo</title> 
  <table style="height: 100%; border-spacing: 0;"> 
   <tbody> 
    <tr> 
     <td id="leftNav">Lorem ip</td> 
     <td id="mainBody"> 
      <div id="moduleMenu1" class="moduleMenu moduleMenu1"> 
       <div> 
        <a href="">Lorem ip</a> 
        <a href="">Lorem </a> 
        <a href="">Lorem ips</a> 
        <a href="">Lorem ips</a> 
       </div> 
      </div> 
      <div id="moduleMenu2" class="moduleMenu moduleMenu2"> 
       <div> 
        <i class="fa fa-chevron-right"></i> 
        <a href="">Lorem i</a> 
        <a href="">Lorem </a> 
        <a href="">Lorem ipsu</a> 
       </div> 
      </div> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials