Navigation menu with edit action sub menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu sub menu

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

Description

Navigation menu with edit action sub 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">
li.nav-item:hover + .box, .box:hover {
   display:block;
}

.box {<!--  w  w  w.  j a  v a 2  s.c  o m-->
   display:none;
   list-style:none;
   width:121px;
   height:71px;
   border:2px solid Chartreuse;
   opacity:0.4;
   background:yellow;
}

.box:hover {
   opacity:2;
}
</style> 
 </head> 
 <body> 
  <div id="nav-menu"> 
   <div class="tab-control-menu">
     Lorem ipsum dolor s 
   </div> 
   <ul id="tab-list"> 
    <li class="nav-item tab"> <a tab="tab1" tab-id="1" class="selected tab">Lorem</a> </li> 
    <li class="box">Lor</li> 
    <li class="nav-item tab"> <a tab="tab2" tab-id="2" class="tab">Lorem</a> </li> 
    <li class="box">Lor</li> 
    <li class="nav-item tab"> <a tab="tab3" tab-id="3" class="tab">Lorem</a> </li> 
    <li class="box">Lor</li> 
    <li class="nav-item tab"> <a tab="tab4" tab-id="4" class="tab">Lorem</a> </li> 
    <li class="box">Lor</li> 
    <li class="nav-item"> <a href="#" class="new-tab">Lorem ipsu</a> </li> 
    <li class="box">Lor</li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials