Change side and direction arrow in dropdown-submenu for bootstrap - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

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

Description

Change side and direction arrow in dropdown-submenu for bootstrap

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="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"> 
  <style id="compiled-css" type="text/css">

.dropdown-menu {<!--   w w w  .  ja va2  s.  c  o m-->
   float:right;
}
.left-submenu {
   float: none;
}
.left-submenu > .dropdown-menu {
   border-radius: 6px 0px 6px 6px;
   left: auto;
   margin-left: 10px;
   right: 98%;
}
.dropdown-submenu>a:after {
   display: block;
   content: " ";
   float: left;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
   border-width: 5px 5px 5px 0;
   border-right-color: #cccccc;
   margin-top: 5px;
   margin-left: -10px;
}


      </style> 
 </head> 
 <body> 
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> 
   <li> <a tabindex="-1" href="#">Action</a> </li> 
   <li> <a tabindex="-1" href="#">Another action</a> </li> 
   <li> <a tabindex="-1" href="#">this is a test this is a test</a> </li> 
   <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try left</a> 
    <ul class="dropdown-menu"> 
     <li> <a tabindex="-1" href="#">shorter things</a> </li> 
     <li> <a tabindex="-1" href="#">shorter things</a> </li> 
     <li> <a tabindex="-1" href="#">shorter things</a> </li> 
    </ul> </li> 
   <li class="divider"></li> 
   <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try right</a> 
    <ul class="dropdown-menu"> 
     <li> <a tabindex="-1" href="#">Second level link</a> </li> 
     <li> <a tabindex="-1" href="#">Second level link</a> </li> 
     <li> <a tabindex="-1" href="#">Second level link</a> </li> 
     <li> <a tabindex="-1" href="#">Second level link</a> </li> 
    </ul> </li> 
  </ul>  
 </body>
</html>

Related Tutorials