CSS dropdown menu with submenu aligning to the right of it's parent - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

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

Description

CSS dropdown menu with submenu aligning to the right of it's parent

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">
.dropmenu ul {<!--  w  w  w  .  jav a 2  s  .  co  m-->
   list-style-type:none;
}

.dropmenu login ul {
   margin:0;
}

.dropmenu login>ul>li {
   position:relative;
   float:right;
   border:2px solid Chartreuse;
}

.dropmenu login>ul>li>a {
   display:inline-block;
   padding:11px 21px;
   color:yellow;
}

.dropmenu login>ul>li>a:hover {
   background-color:blue;
   color:pink;
}

#cart-button {
   font-size:15px;
}

.dropmenu login ul ul {
   display:none;
   position:absolute;
   right:0;
   top:100%;
}

.dropmenu login ul>li:hover ul {
   display:block;
}

.dropmenu login>ul>li>ul>li>a {
   display:inline-block;
   width:100px;
   padding:11px 21px;
   background:OrangeRed;
   background:grey;
   color:BlueViolet;
}

.dropmenu login>ul>li>ul>li>a:hover {
   background-color:Chartreuse;
   color:yellow;
}
</style> 
 </head> 
 <body> 
  <div id="dropmenu" class="dropmenu"> 
   <login> 
    <ul> 
     <li> <a href="/menu1">Lorem</a> </li> 
     <li> <a href="javascript:void(0);">Lorem ip</a> 
      <ul> 
       <li> <a href="/profile">Lorem i</a> </li> 
       <li> <a href="/transactions">Lorem ipsum </a> </li> 
       <li> <a href="/account/sign-out" data-load="refresh">Lorem </a> </li> 
      </ul> </li> 
    </ul> 
   </login> 
  </div>  
 </body>
</html>

Related Tutorials