Circle Border for Menu - HTML CSS CSS Widget

Description

Circle Border for Menu
Demo Code

<html lang="en">
 <head> 
  <style>
categories li.active a {
   color:Chartreuse;
   border-left:4px solid yellow;
   font-weight:bolder
}

.categories li a {
   padding-left:21px !important;
   padding-right:21px !important;
}

.categories {<!--from   w  w  w  .  j a  v a 2s  .c o  m-->
   padding:0 !important;
}

.categories li {
   float:left;
   display:block;
   width:100%;
   font-size:16px;
   font-weight:601;
   padding:0 !important;
}

.categories li:last-child {
   border-bottom:none;
}

.categories li a {
   float:left;
   display:block;
   width:100%;
   color:blue;
   position:relative;
   padding:16px 51px 16px 21px;
   font-weight:bolder;
   font-family:"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

.categories li a:hover {
   color:pink;
   position:relative;
   border-left:4px solid OrangeRed;
   font-weight:bolder
}

.categories li a:hover:before {
   content:"";
   position:absolute;
   top:21px;
   left:-7px;
   width:11px;
   height:11px;
   border-radius:100%;
   background:grey;
}

.categories li.active a {
   color:BlueViolet;
   border-left:4px solid Chartreuse;
   font-weight:bolder
}

.categories.right a {
   padding-right:21px;
}

.categories.right a:before {
   left:21px;
   right:auto;
   background-position:-162px 0;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul class="categories right"> 
   <li class="active"> <a href="#">Lorem ipsum</a> </li> 
   <li> <a href="#">Lorem ipsum dol</a> </li> 
   <li> <a href="#">Lorem </a> </li> 
   <li> <a href="#">Lorem ipsum</a> </li> 
   <li> <a href="#">Lorem ipsum d</a> </li> 
   <li> <a href="#">Lorem ipsum</a> </li> 
   <li> <a href="#">Lorem</a> </li> 
   <li> <a href="#">Lorem ip</a> </li> 
  </ul>  
 </body>
</html>
Circle Border for Menu - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
