Change color and style on hover for horizontal menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

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

Description

Change color and style on hover for horizontal 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">

#submenu {<!--from w w w .jav  a 2s  .com-->
   background-color: yellow;
   position: relative;
   top: 15px;
   margin-left: auto;
   margin-right: auto;
   height: 40px;
   width: 90%;
   border-style: dashed;
}
#submenu:hover {
   background-color: red;
}
.my:hover {
   background-color: pink;
}
.my {
   position: relative;
   float: left;
   background-color: blue;
   width: 20%;
   height: 100%;
   font-size: 20px;
   line-height: 50px;
   text-align: center;
}
.my a:link, a:visited {
   text-decoration: none;
   color: black;
}
.my a:hover {
   border-top: 1px dashed #f7a319;
}


      </style> 
 </head> 
 <body> 
  <div id="submenu"> 
   <div class="my"> 
    <a href="#">About</a> 
   </div> 
   <div class="my"> 
    <a href="#">Product</a> 
   </div> 
   <div class="my"> 
    <a href="#">Help</a> 
   </div> 
   <div class="my"> 
    <a href="#">Home</a> 
   </div> 
   <div class="my"> 
    <a href="#">License</a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials