Adding dot above navigation list elements on hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

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

Description

Adding dot above navigation list elements on hover

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">
ul li {
   display:inline-block;
   position:relative;
}

ul li:hover:before {
   content:"";<!-- ww w  .  j  a v  a  2s  .  co m-->
   position:absolute;
   top:-16px;
   background:red;
   width:16px;
   height:16px;
   border-radius:100%;
   left:calc(51% - 9px);
}
</style> 
 </head> 
 <body> 
  <div class="navbar"> 
   <ul> 
    <li class="active"> <a href="#">link 1&gt;</a> </li> 
    <li> <a href="#">link 2&gt;</a> </li> 
    <li> <a href="#">link 2223&gt;</a> </li> 
    <li> <a href="#">link 4&gt;</a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials