CSS dropdown menu hover effect - 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 hover effect

Demo Code

ResultView the demo in separate window 

<!--<!--from  ww  w  .  ja va  2 s .co  m-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
 <head> 
  <style>
.menu {
   margin:0;
   padding:0;
   border-collapse:collapse;
}

.menu li {
   list-style:none;
   float:left;
}

.menu li a:link, .menu li a:visited {
   display:block;
   text-decoration:none;
   background-color:Chartreuse;
   padding:0.6em 3em;
   margin:0;
   border-left:2px solid yellow;
   border-top:2px solid blue;
   border-right:2px solid pink;
   color:OrangeRed;
}

.menu li a:hover {
   background-color:grey;
   color:BlueViolet;
   outline:2px solid black;
}

.menu li ul {
   position:absolute;
   display:none;
   border-top:2px solid Chartreuse;
   margin:0;
   padding:0;
   z-index:1000;
}

.menu li ul li {
   display:inline;
   float:none;
   width:100%;
}

.menu li ul li a:link, .menu li ul li a:visited {
   background-color:yellow;
   color:blue;
   width:auto;
}

.menu>li:hover ul {
   display:block;
}

.menu li ul li a:hover {
   background-color:pink;
   color:OrangeRed;
}
</style> 
 </head> 
 <body> 
  <ul class="menu"> 
   <li class="subMenu"> <a style="clear: left;" id="jiraMenu" href="#">Lore</a> 
    <ul> 
     <li> <a href="#">Lorem ipsum do</a> </li> 
     <li> <a href="#">Lorem ipsum dolo</a> </li> 
    </ul> </li> 
   <li> <a href="#" name="language">Lo</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials