CSS show menu sub li when menu has position fixed - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Fixed Position

Description

CSS show menu sub li when menu has position fixed

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">
#menu {<!-- www  .j  a  v  a 2  s  . c  o  m-->
   height:571px;
   width:291px;
   position:fixed;
   top:66px;
   display:block;
   left:0;
   display:none;
   text-align:center;
   font-size:16px;
}

ul#catmenu {
   width:100%;
}

ul#catmenu li,ul.subul li {
   position:relative;
   border-bottom:2px solid Chartreuse;
   cursor:pointer;
   height:36px;
   line-height:36px;
   padding:6px 0;
   text-align:left;
   text-indent:11px;
   text-transform:capitalize;
   width:100%;
}

ul#catmenu li.main.with {
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat scroll 96% 51% yellow;
}

ul.subul {
   display:none;
   background:blue;
   left:291px;
   top:0;
   position:absolute;
   width:251px;
   z-index:11;
}

ul.subul.dropup {
   top:auto;
   bottom:0;
}

ul#catmenu li.main:hover ul.subul {
   display:block;
}

ul#catmenu li:hover {
   background:pink;
}

ul#catmenu li.main.with:hover {
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat scroll 96% 51% OrangeRed;
}
</style> 
 </head> 
 <body> 
  <div id="menu" style="display: block;"> 
   <h2>Lorem ipsum dolor sit</h2> 
   <div id="nav"> 
    <ul id="catmenu"> 
     <li class="main"> <a href="accountants">Lorem ipsum</a> 
      <ul class="subul"> 
       <li> <a href="travel-2">Lorem ipsum </a> </li> 
       <li> <a href="travel-agents">Lorem ipsum </a> </li> 
       <li> <a href="travel-agents">Lorem ipsum </a> </li> 
      </ul> </li> 
     <li class="main"> <a href="automotive">Lorem ipsu</a> </li> 
     <li class="main"> <a href="building">Lorem ip</a> </li> 
     <li class="main"> <a href="business-services">Lorem ipsum dolor</a> </li> 
     <li class="main with"> <a href="travel">Lorem </a> 
      <ul class="subul dropup"> 
       <li> <a href="travel-2">Lorem ip</a> </li> 
       <li> <a href="travel-agents">Lorem ipsum do</a> </li> 
       <li> <a href="travel-agents">Lorem ipsum do</a> </li> 
      </ul> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials