CSS Ul li navigation with hover highlight - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover on list

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover on list

Description

CSS Ul li navigation with hover highlight

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 {<!--from w ww. j  ava 2 s.  co  m-->
   list-style:none;
   background:Chartreuse;
   border-left:4px solid yellow;
}

li a {
   text-decoration:none;
   color:blue;
}

li a:hover {
   border-radius:6px;
   background:pink;
   font-weight:bold;
}

li:before {
   content:"?";
   font-size:11px;
   margin-right:11px;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li> <a href="#">Lorem ipsum d</a> </li> 
   <li> <a href="#">Lorem ipsum </a> </li> 
   <li> <a href="#">Lorem ipsum do</a> </li> 
   <li> <a href="#">Lorem ipsum d</a> </li> 
   <li> <a href="#">Lorem ipsu</a> </li> 
   <li> <a href="#">Lorem ips</a> </li> 
   <li> <a href="#">Lorem ipsum d</a> </li> 
   <li> <a href="#">Lorem ipsum dolo</a> </li> 
   <li> <a href="#">Lorem ip</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials